22< html xmlns ="http://www.w3.org/1999/xhtml ">
33
44< head >
5- < meta http-equiv ="Content-Type " content ="text/html; charset=utf-8 " />
6- < title > 标记动画图 </ title >
5+ < meta http-equiv ="Content-Type " content ="text/html; charset=utf-8 "/>
6+ < title > 轨迹动画图 </ title >
77 < script include ="jquery,omnivore " src ="./static/libs/include-lib-local.js "> </ script >
88 < script include ="timedimension " src ="./static/libs/include-leaflet-local.js "> </ script >
99 < style >
1010 body {
1111 margin : 0 ;
1212 padding : 0 ;
1313 }
14-
15- # map {
14+ # test {
1615 position : absolute;
1716 top : 0 ;
1817 bottom : 0 ;
2221</ head >
2322
2423< 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- } ) ;
24+ < div id ="test "> </ div >
25+ < script >
26+ var startDate = new Date ( ) ;
27+ startDate . setUTCHours ( 0 , 0 , 0 , 0 ) ;
3528
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.
29+ var map = L . map ( 'test' , {
30+ crs : L . CRS . EPSG4326 ,
31+ fullscreenControl : true
32+ } ) . setView ( [ 25.29 , 104.28 ] , 10 ) ;
33+ var layer1 = new Zondy . Map . TDTLayer ( {
34+ layerType : 'vec' ,
35+ minZoom : 0 ,
36+ maxZoom : 15 ,
37+ token : "4c27d6e0e8a90715b23a989d42272fd8" ,
38+ noWrap : true
39+ } ) ;
40+ var layer2 = new Zondy . Map . TDTLayer ( {
41+ layerType : 'cva' ,
42+ minZoom : 0 ,
43+ maxZoom : 15 ,
44+ token : "4c27d6e0e8a90715b23a989d42272fd8" ,
45+ noWrap : true
46+ } ) ;
47+ var LayerG = L . layerGroup ( [ layer1 , layer2 ] ) ;
48+ LayerG . addTo ( map ) ;
4349
44- var player = new L . zondy . TimeDimensionPlayer ( {
45- transitionTime : 100 ,
46- loop : false ,
47- startOver : true
48- } , timeDimension ) ;
4950
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- } ;
51+ // 1.开始手动实例化timeDimension
52+ var timeDimension = new L . zondy . TimeDimension ( {
53+ period : "PT5M" ,
54+ } ) ;
55+ // 2.在所有图层中共享timeDimension对象
56+ map . timeDimension = timeDimension ;
57+ // 否则，必须在所有图层中设置“timeDimension”选项
58+ // 3.创建播放器
59+ var player = new L . zondy . TimeDimensionPlayer ( {
60+ transitionTime : 100 ,
61+ loop : false ,
62+ startOver : true
63+ } , timeDimension ) ;
64+ // 4.将播放器player放入timeDimensionControl控制器中
65+ var timeDimensionControlOptions = {
66+ player : player ,
67+ timeDimension : timeDimension ,
68+ position : 'bottomleft' ,
69+ autoPlay : true ,
70+ minSpeed : 1 ,
71+ speedStep : 0.5 ,
72+ maxSpeed : 15 ,
73+ timeSliderDragUpdate : true
74+ } ;
75+ // 5.将timeDimensionControl添加到地图中
76+ var timeDimensionControl = new L . zondy . TimeDimensionControl ( timeDimensionControlOptions ) ;
77+ map . addControl ( timeDimensionControl ) ;
6078
61- var timeDimensionControl = new L . zondy . TimeDimensionControl ( timeDimensionControlOptions ) ;
62- map . addControl ( timeDimensionControl ) ;
79+ var icon = L . icon ( {
80+ iconUrl : './static/data/picture/marker/running.png' ,
81+ iconSize : [ 22 , 22 ] ,
82+ iconAnchor : [ 5 , 25 ]
83+ } ) ;
6384
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 , {
85+ var geojson = { } ;
86+ $ . get ( './static/data/geojson/line-string.json' , function ( res ) {
87+ geojson = initGeojson ( res ) ;
88+ var geoJSONLayer = L . geoJSON ( geojson , {
7189 pointToLayer : function ( feature , latLng ) {
72- if ( feature . properties . hasOwnProperty ( ' last' ) ) {
90+ if ( feature . properties . hasOwnProperty ( " last" ) ) {
7391 return new L . Marker ( latLng , {
74- icon : icon
92+ icon : icon ,
7593 } ) ;
7694 }
7795 return L . circleMarker ( latLng ) ;
78- }
96+ } ,
7997 } ) ;
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 , {
98+ var gpxTimeLayer = L . zondy . TimeDimensionLayerGeoJson ( geoJSONLayer , {
8899 updateTimeDimension : true ,
100+ duration : "PT2M" ,
101+ updateTimeDimensionMode : "replace" ,
89102 addlastPoint : true ,
90- waitForReady : true
91103 } ) ;
92-
93- var baseLayers = getCommonBaseLayers ( map ) ; // see baselayers.js
94104 gpxTimeLayer . addTo ( map ) ;
105+ } ) ;
95106
96- function getCommonBaseLayers ( map ) {
97- var osmLayer = L . tileLayer ( 'https://{s}.tile.osm.org/{z}/{x}/{y}.png' , {
98- attribution : '© <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 >
107+ //注意：geojson数据中要有times和播放器建立链接
108+ function initGeojson ( geojson ) {
109+ let date = new Date ( ) ;
110+ let timestamp = date . getTime ( ) ;
111+ geojson . properties . times = [ ] ;
112+ geojson . geometry . coordinates = geojson . geometry . coordinates . map (
113+ ( point ) => {
114+ ++ timestamp ;
115+ geojson . properties . times . push ( timestamp ) ;
116+ return point ;
117+ }
118+ ) ;
119+ return geojson ;
120+ }
121+ </ script >
122122</ body >
123123
124124</ html >
0 commit comments