Spaces:
Running
Running
| <html lang="zh-cn"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <title>leaflet.trackplayback</title> | |
| <link rel="stylesheet" href="examples/lib/leaflet/leaflet.css" /> | |
| <link rel="stylesheet" href="dist/control.playback.css" /> | |
| <script src="examples/lib/leaflet/leaflet.js"></script> | |
| <script src="dist/control.trackplayback.js"></script> | |
| <script src="dist/leaflet.trackplayback.js"></script> | |
| <script src="examples/data/locations.js"></script> | |
| </head> | |
| <body> | |
| <div | |
| id="mapid" | |
| style=" | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| width: 100%; | |
| height: 100%; | |
| overflow: hidden; | |
| " | |
| ></div> | |
| <script> | |
| // create map and add baseLayer | |
| const map = L.map("mapid").setView([13.8786, 100.527], 12); | |
| L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { | |
| attribution: | |
| '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors', | |
| }).addTo(map); | |
| // Import Location data | |
| L.geoJSON(locations, { | |
| style: function (feature) { | |
| switch (feature.properties.Class) { | |
| case 1: | |
| return { color: "#ff0000" }; | |
| case 2: | |
| return { color: "#0000ff" }; | |
| case 3: | |
| return { color: "#00ff00" }; | |
| } | |
| }, | |
| }).bindPopup( | |
| function (layer) { | |
| return layer.feature.properties.Name; //merely sets the tooltip text | |
| }, | |
| { permanent: true, opacity: 0.5 } //then add your options | |
| ) | |
| .addTo(map); | |
| // get data from server | |
| const xhr = new XMLHttpRequest(); | |
| xhr.open("GET", "examples/data/test_gps_non.json", true); // Change File Path Here | |
| xhr.onreadystatechange = xhrCallback; | |
| xhr.send(); | |
| function xhrCallback() { | |
| if (xhr.readyState === 4 && xhr.status === 200) { | |
| const data = JSON.parse(xhr.responseText); | |
| const trackplayback = L.trackplayback(data, map, { | |
| targetOptions: { | |
| useImg: true, | |
| imgUrl: "examples/navigation.png", | |
| width: 24.5, | |
| height: 36, | |
| }, | |
| trackLineOptions: { | |
| isDraw: true, | |
| }, | |
| trackPointOptions: { | |
| isDraw: true, | |
| }, | |
| }); | |
| const trackplaybackControl = L.trackplaybackcontrol(trackplayback); | |
| trackplaybackControl.addTo(map); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |