Skip to content

Commit 67a237c

Browse files
author
潘卓然ParnDeedlit
committed
【站点】【新增】【新增动态轨迹 & 时间轨迹图层】
1 parent fae6738 commit 67a237c

File tree

7 files changed

+252
-2
lines changed

7 files changed

+252
-2
lines changed

‎website/public/static/demo/config/config-leaflet.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,22 @@
326326
"detail": "",
327327
"icon": "common_marker_cluster.png",
328328
"update": "最后更新时间：2020-01-08"
329+
},
330+
{
331+
"name": "标记动画图",
332+
"file": "common_marker_animate",
333+
"diffcult": "1",
334+
"detail": "",
335+
"icon": "common_marker_animate.png",
336+
"update": "最后更新时间：2021-04-18"
337+
},
338+
{
339+
"name": "轨迹动画图",
340+
"file": "common_line_animate",
341+
"diffcult": "1",
342+
"detail": "",
343+
"icon": "common_line_animate.png",
344+
"update": "最后更新时间：2021-04-18"
329345
}
330346
]
331347
},

‎website/public/static/demo/leaflet/example/client-view/common/common_line_animate.htm‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>标记动画图</title>
7+
<script include="jquery,omnivore" src="./static/libs/include-lib-local.js"></script>
8+
<script include="timedimension" src="./static/libs/include-leaflet-local.js"></script>
9+
<style>
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
#map {
16+
position: absolute;
17+
top: 0;
18+
bottom: 0;
19+
width: 100%;
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
<div id="map"></div>
26+
<script>
27+
var startDate = new Date();
28+
startDate.setUTCHours(0, 0, 0, 0);
29+
30+
var map = L.map('map', {
31+
zoom: 12,
32+
fullscreenControl: true,
33+
center: [39.3, 4]
34+
});
35+
36+
// start of TimeDimension manual instantiation
37+
var timeDimension = new L.zondy.TimeDimension({
38+
period: "PT5M",
39+
});
40+
// helper to share the timeDimension object between all layers
41+
map.timeDimension = timeDimension;
42+
// otherwise you have to set the 'timeDimension' option on all layers.
43+
44+
var player = new L.zondy.TimeDimensionPlayer({
45+
transitionTime: 100,
46+
loop: false,
47+
startOver: true
48+
}, timeDimension);
49+
50+
var timeDimensionControlOptions = {
51+
player: player,
52+
timeDimension: timeDimension,
53+
position: 'bottomleft',
54+
autoPlay: true,
55+
minSpeed: 1,
56+
speedStep: 0.5,
57+
maxSpeed: 15,
58+
timeSliderDragUpdate: true
59+
};
60+
61+
var timeDimensionControl = new L.zondy.TimeDimensionControl(timeDimensionControlOptions);
62+
map.addControl(timeDimensionControl);
63+
64+
var icon = L.icon({
65+
iconUrl: './static/data/picture/marker/running.png',
66+
iconSize: [22, 22],
67+
iconAnchor: [5, 25]
68+
});
69+
70+
var customLayer = L.geoJson(null, {
71+
pointToLayer: function (feature, latLng) {
72+
if (feature.properties.hasOwnProperty('last')) {
73+
return new L.Marker(latLng, {
74+
icon: icon
75+
});
76+
}
77+
return L.circleMarker(latLng);
78+
}
79+
});
80+
81+
var gpxLayer = omnivore.gpx('../../static/data/gpx/running_mallorca.gpx', null, customLayer).on('ready', function () {
82+
map.fitBounds(gpxLayer.getBounds(), {
83+
paddingBottomRight: [40, 40]
84+
});
85+
});
86+
87+
var gpxTimeLayer = L.zondy.TimeDimensionLayerGeoJson(gpxLayer, {
88+
updateTimeDimension: true,
89+
addlastPoint: true,
90+
waitForReady: true
91+
});
92+
93+
var baseLayers = getCommonBaseLayers(map); // see baselayers.js
94+
gpxTimeLayer.addTo(map);
95+
96+
function getCommonBaseLayers(map) {
97+
var osmLayer = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
98+
attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
99+
});
100+
var bathymetryLayer = L.tileLayer.wms("https://ows.emodnet-bathymetry.eu/wms", {
101+
layers: 'emodnet:mean_atlas_land',
102+
format: 'image/png',
103+
transparent: true,
104+
attribution: "EMODnet Bathymetry",
105+
opacity: 0.8
106+
});
107+
var coastlinesLayer = L.tileLayer.wms("https://ows.emodnet-bathymetry.eu/wms", {
108+
layers: 'coastlines',
109+
format: 'image/png',
110+
transparent: true,
111+
attribution: "EMODnet Bathymetry",
112+
opacity: 0.8
113+
});
114+
var bathymetryGroupLayer = L.layerGroup([bathymetryLayer, coastlinesLayer]);
115+
bathymetryGroupLayer.addTo(map);
116+
return {
117+
"EMODnet Bathymetry": bathymetryGroupLayer,
118+
"OSM": osmLayer
119+
};
120+
}
121+
</script>
122+
</body>
123+
124+
</html>

‎website/public/static/demo/leaflet/example/client-view/common/common_marker_animate.htm‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>标记动画图</title>
7+
<script include="jquery" src="./static/libs/include-lib-local.js"></script>
8+
<script include="cluster" src="./static/libs/include-leaflet-local.js"></script>
9+
<style>
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
#map {
16+
position: absolute;
17+
top: 0;
18+
bottom: 0;
19+
width: 100%;
20+
}
21+
</style>
22+
</head>
23+
24+
<body>
25+
<div id="map"></div>
26+
<script>
27+
var map = L.map('map', {
28+
crs: L.CRS.EPSG4326,
29+
}).setView([34.25, 108.95], 10);
30+
var layer1 = new Zondy.Map.TDTLayer({
31+
layerType: 'vec',
32+
minZoom: 0,
33+
maxZoom: 15,
34+
token: "4c27d6e0e8a90715b23a989d42272fd8",
35+
noWrap: true
36+
});
37+
var layer2 = new Zondy.Map.TDTLayer({
38+
layerType: 'cva',
39+
minZoom: 0,
40+
maxZoom: 15,
41+
token: "4c27d6e0e8a90715b23a989d42272fd8",
42+
noWrap: true
43+
});
44+
var LayerG = L.layerGroup([layer1, layer2]);
45+
LayerG.addTo(map);
46+
47+
var bikeIcon = L.icon({
48+
iconUrl: './static/data/picture/marker/bike.png',
49+
iconSize: [25, 39],
50+
iconAnchor: [12, 39],
51+
shadowUrl: null
52+
});
53+
var routeLines = [], markers = [];
54+
var lineGeoJson, pointGeoJson;
55+
var point_list = {};
56+
57+
$.get('../../static/data/geojson/animate-marker.json', function (res) {
58+
console.log('data', window.L.zondy);
59+
for (var i = 0; i < res.features.length; i++) {
60+
var point_iter = res.features[i].geometry.coordinates;
61+
var lines = [];
62+
for (var j = 0; j < point_iter.length; j++) {
63+
lines.push(
64+
[point_iter[j][0], point_iter[j][1]]
65+
);
66+
}
67+
var line = L.polyline(lines);
68+
routeLines.push(line);
69+
}
70+
71+
routeLines.forEach((routeLine, i) => {
72+
var marker = L.zondy.AnimatedMarkerLayer(routeLine.getLatLngs(), {
73+
icon: bikeIcon,
74+
autoStart: true,
75+
distance: 1000, // meters,表示每帧移动的距离,越大则一秒移动的距离越远,速度越快
76+
interval: 1000, // milliseconds,每帧之间移动的时间间隔,与distance相互配合
77+
onEnd: function () {
78+
// TODO:
79+
this.remove();//消除该图标marker
80+
}
81+
});
82+
marker.on('click', function (e) {
83+
});
84+
marker.on('popupopen', function (e) {
85+
});
86+
marker.on('popupclose', function (e) {
87+
});
88+
89+
var popup = L.popup().setContent('<p>Hello world!<br />This is a nice popup.</p>')
90+
91+
marker.bindPopup(popup);
92+
map.addLayer(marker);
93+
markers.push(marker);
94+
});
95+
96+
markers.forEach(marker => {
97+
marker.start();
98+
});
99+
100+
});
101+
</script>
102+
103+
104+
</body>
105+
106+
</html>

‎website/public/static/demo/leaflet/gallery/client-view/common/common_line_animate.png‎

116 KB
Loading

‎website/public/static/demo/leaflet/gallery/client-view/common/common_marker_animate.png‎

125 KB
Loading

‎website/public/static/libs/include-leaflet-local.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -244,11 +244,12 @@
244244
if (inArray(includes, 'pdf')) {
245245
inputScript(httpUrl + "/cdn/jspdf/dist/jspdf.min.js");
246246
}
247-
248247
if (inArray(includes, 'bing')) {
249248
inputScript(httpUrl + "/cdn/leaflet-plugins/leaflet-bing-layer/leaflet-bing-layer.min.js");
250249
}
251-
250+
if (inArray(includes, 'timedimension')) {
251+
inputCSS(httpUrl + "/cdn/leaflet-plugins/Leaflet.TimeDimension/dist/leaflet.timedimension.control.css");
252+
}
252253
if (!inArray(excludes, 'plugin')) {
253254
inputScript(httpUrl + "/cdn/zondyclient/webclient-leaflet-plugin.min.js");
254255
}

‎website/public/static/libs/include-lib-local.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,9 @@
9797
if (inArray(includes, 'papaparse')) {
9898
inputScript(httpUrl + "/cdn/papaparse/papaparse.js");
9999
}
100+
if (inArray(includes, 'omnivore')) {
101+
inputScript(httpUrl + "/cdn/omnivore/dist/omnivore.min.js");
102+
}
100103
}
101104

102105
load();

0 commit comments

Comments
 (0)