Upload 46 files

dist/control.trackplayback.js

@@ -1,2 +1,2 @@
-!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("leaflet"));else if("function"==typeof define&&define.amd)define(["leaflet"],e);else{var i="object"==typeof exports?e(require("leaflet")):e(t.L);for(var n in i)("object"==typeof exports?exports:t)[n]=i[n]}}(window,function(t){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var a=e[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,i),a.l=!0,a.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var a in t)i.d(n,a,function(e){return t[e]}.bind(null,a));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=2)}([function(e,i){e.exports=t},,function(t,e,i){"use strict";i.r(e);var n=i(0),a=i.n(n);const o=a.a.Control.extend({options:{position:"topright",showOptions:!0,showInfo:!0,showSlider:!0,autoPlay:!1},initialize:function(t,e){a.a.Control.prototype.initialize.call(this,e),this.trackPlayBack=t,this.trackPlayBack.on("tick",this._tickCallback,this)},onAdd:function(t){return this._initContainer(),this._container},onRemove:function(t){this.trackPlayBack.dispose(),this.trackPlayBack.off("tick",this._tickCallback,this)},getTimeStrFromUnix:function(t,e="s"){t=parseInt(1e3*t);let i,n=new Date(t),a=n.getFullYear(),o=n.getMonth()+1<10?"0"+(n.getMonth()+1):n.getMonth()+1,r=n.getDate()<10?"0"+n.getDate():n.getDate(),s=n.getHours()<10?"0"+n.getHours():n.getHours(),c=n.getMinutes()<10?"0"+n.getMinutes():n.getMinutes(),l=n.getSeconds()<10?"0"+n.getSeconds():n.getSeconds();return i="d"===e?a+"-"+o+"-"+r:"h"===e?a+"-"+o+"-"+r+" "+s:"m"===e?a+"-"+o+"-"+r+" "+s+":"+c:a+"-"+o+"-"+r+" "+s+":"+c+":"+l},_initContainer:function(){return this._container=a.a.DomUtil.create("div","leaflet-control-playback"),a.a.DomEvent.disableClickPropagation(this._container),this._optionsContainer=this._createContainer("optionsContainer",this._container),this._buttonContainer=this._createContainer("buttonContainer",this._container),this._infoContainer=this._createContainer("infoContainer",this._container),this._sliderContainer=this._createContainer("sliderContainer",this._container),this._pointCbx=this._createCheckbox("show trackPoint","show-trackpoint",this._optionsContainer,this._showTrackPoint),this._lineCbx=this._createCheckbox("show trackLine","show-trackLine",this._optionsContainer,this._showTrackLine),this._playBtn=this._createButton("play","btn-stop",this._buttonContainer,this._play),this._restartBtn=this._createButton("replay","btn-restart",this._buttonContainer,this._restart),this._slowSpeedBtn=this._createButton("slow","btn-slow",this._buttonContainer,this._slow),this._quickSpeedBtn=this._createButton("quick","btn-quick",this._buttonContainer,this._quick),this._closeBtn=this._createButton("close","btn-close",this._buttonContainer,this._close),this._infoStartTime=this._createInfo("startTime: ",this.getTimeStrFromUnix(this.trackPlayBack.getStartTime()),"info-start-time",this._infoContainer),this._infoEndTime=this._createInfo("endTime: ",this.getTimeStrFromUnix(this.trackPlayBack.getEndTime()),"info-end-time",this._infoContainer),this._infoCurTime=this._createInfo("curTime: ",this.getTimeStrFromUnix(this.trackPlayBack.getCurTime()),"info-cur-time",this._infoContainer),this._infoSpeedRatio=this._createInfo("speed: ",`X${this.trackPlayBack.getSpeed()}`,"info-speed-ratio",this._infoContainer),this._slider=this._createSlider("time-slider",this._sliderContainer,this._scrollchange),this._container},_createContainer:function(t,e){return a.a.DomUtil.create("div",t,e)},_createCheckbox:function(t,e,i,n){let o=a.a.DomUtil.create("div",e+" trackplayback-checkbox",i),r=a.a.DomUtil.create("input","trackplayback-input",o),s=`trackplayback-input-${a.a.Util.stamp(r)}`;r.setAttribute("type","checkbox"),r.setAttribute("id",s);let c=a.a.DomUtil.create("label","trackplayback-label",o);return c.setAttribute("for",s),c.innerHTML=t,a.a.DomEvent.on(r,"change",n,this),o},_createButton:function(t,e,i,n){let o=a.a.DomUtil.create("a",e,i);return o.href="#",o.title=t,o.setAttribute("role","button"),o.setAttribute("aria-label",t),a.a.DomEvent.disableClickPropagation(o),a.a.DomEvent.on(o,"click",n,this),o},_createInfo:function(t,e,i,n){let o=a.a.DomUtil.create("div","info-container",n);a.a.DomUtil.create("span","info-title",o).innerHTML=t;let r=a.a.DomUtil.create("span",i,o);return r.innerHTML=e,r},_createSlider:function(t,e,i){let n=a.a.DomUtil.create("input",t,e);return n.setAttribute("type","range"),n.setAttribute("min",this.trackPlayBack.getStartTime()),n.setAttribute("max",this.trackPlayBack.getEndTime()),n.setAttribute("value",this.trackPlayBack.getCurTime()),a.a.DomEvent.on(n,"click mousedown dbclick",a.a.DomEvent.stopPropagation).on(n,"click",a.a.DomEvent.preventDefault).on(n,"change",i,this).on(n,"mousemove",i,this),n},_showTrackPoint(t){t.target.checked?this.trackPlayBack.showTrackPoint():this.trackPlayBack.hideTrackPoint()},_showTrackLine(t){t.target.checked?this.trackPlayBack.showTrackLine():this.trackPlayBack.hideTrackLine()},_play:function(){a.a.DomUtil.hasClass(this._playBtn,"btn-stop")?(a.a.DomUtil.removeClass(this._playBtn,"btn-stop"),a.a.DomUtil.addClass(this._playBtn,"btn-start"),this._playBtn.setAttribute("title","stop"),this.trackPlayBack.start()):(a.a.DomUtil.removeClass(this._playBtn,"btn-start"),a.a.DomUtil.addClass(this._playBtn,"btn-stop"),this._playBtn.setAttribute("title","play"),this.trackPlayBack.stop())},_restart:function(){a.a.DomUtil.removeClass(this._playBtn,"btn-stop"),a.a.DomUtil.addClass(this._playBtn,"btn-start"),this._playBtn.setAttribute("title","stop"),this.trackPlayBack.rePlaying()},_slow:function(){this.trackPlayBack.slowSpeed();let t=this.trackPlayBack.getSpeed();this._infoSpeedRatio.innerHTML=`X${t}`},_quick:function(){this.trackPlayBack.quickSpeed();let t=this.trackPlayBack.getSpeed();this._infoSpeedRatio.innerHTML=`X${t}`},_close:function(){return a.a.DomUtil.remove(this._container),this.onRemove&&this.onRemove(this._map),this},_scrollchange:function(t){let e=Number(t.target.value);this.trackPlayBack.setCursor(e)},_tickCallback:function(t){let e=this.getTimeStrFromUnix(t.time);this._infoCurTime.innerHTML=e,this._slider.value=t.time,t.time>=this.trackPlayBack.getEndTime()&&(a.a.DomUtil.removeClass(this._playBtn,"btn-start"),a.a.DomUtil.addClass(this._playBtn,"btn-stop"),this._playBtn.setAttribute("title","play"),this.trackPlayBack.stop())}});a.a.TrackPlayBackControl=o,a.a.trackplaybackcontrol=function(t,e){return new o(t,e)}}])});
+!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("leaflet"));else if("function"==typeof define&&define.amd)define(["leaflet"],e);else{var i="object"==typeof exports?e(require("leaflet")):e(t.L);for(var n in i)("object"==typeof exports?exports:t)[n]=i[n]}}(window,function(t){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var a=e[n]={i:n,l:!1,exports:{}};return t[n].call(a.exports,a,a.exports,i),a.l=!0,a.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var a in t)i.d(n,a,function(e){return t[e]}.bind(null,a));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=2)}([function(e,i){e.exports=t},,function(t,e,i){"use strict";i.r(e);var n=i(0),a=i.n(n);const o=a.a.Control.extend({options:{position:"topright",showOptions:!0,showInfo:!0,showSlider:!0,autoPlay:!1},initialize:function(t,e){a.a.Control.prototype.initialize.call(this,e),this.trackPlayBack=t,this.trackPlayBack.on("tick",this._tickCallback,this)},onAdd:function(t){return this._initContainer(),this._container},onRemove:function(t){this.trackPlayBack.dispose(),this.trackPlayBack.off("tick",this._tickCallback,this)},getTimeStrFromUnix:function(t,e="s"){t=parseInt(1e3*t);let i,n=new Date(t),a=n.getFullYear(),o=n.getMonth()+1<10?"0"+(n.getMonth()+1):n.getMonth()+1,r=n.getDate()<10?"0"+n.getDate():n.getDate(),s=n.getHours()-7<10?"0"+n.getHours()-7:n.getHours()-7,c=n.getMinutes()<10?"0"+n.getMinutes():n.getMinutes(),l=n.getSeconds()<10?"0"+n.getSeconds():n.getSeconds();return i="d"===e?a+"-"+o+"-"+r:"h"===e?a+"-"+o+"-"+r+" "+s:"m"===e?a+"-"+o+"-"+r+" "+s+":"+c:a+"-"+o+"-"+r+" "+s+":"+c+":"+l},_initContainer:function(){return this._container=a.a.DomUtil.create("div","leaflet-control-playback"),a.a.DomEvent.disableClickPropagation(this._container),this._optionsContainer=this._createContainer("optionsContainer",this._container),this._buttonContainer=this._createContainer("buttonContainer",this._container),this._infoContainer=this._createContainer("infoContainer",this._container),this._sliderContainer=this._createContainer("sliderContainer",this._container),this._pointCbx=this._createCheckbox("show trackPoint","show-trackpoint",this._optionsContainer,this._showTrackPoint),this._lineCbx=this._createCheckbox("show trackLine","show-trackLine",this._optionsContainer,this._showTrackLine),this._playBtn=this._createButton("play","btn-stop",this._buttonContainer,this._play),this._restartBtn=this._createButton("replay","btn-restart",this._buttonContainer,this._restart),this._slowSpeedBtn=this._createButton("slow","btn-slow",this._buttonContainer,this._slow),this._quickSpeedBtn=this._createButton("quick","btn-quick",this._buttonContainer,this._quick),this._closeBtn=this._createButton("close","btn-close",this._buttonContainer,this._close),this._infoStartTime=this._createInfo("startTime: ",this.getTimeStrFromUnix(this.trackPlayBack.getStartTime()),"info-start-time",this._infoContainer),this._infoEndTime=this._createInfo("endTime: ",this.getTimeStrFromUnix(this.trackPlayBack.getEndTime()),"info-end-time",this._infoContainer),this._infoCurTime=this._createInfo("curTime: ",this.getTimeStrFromUnix(this.trackPlayBack.getCurTime()),"info-cur-time",this._infoContainer),this._infoSpeedRatio=this._createInfo("speed: ",`X${this.trackPlayBack.getSpeed()}`,"info-speed-ratio",this._infoContainer),this._slider=this._createSlider("time-slider",this._sliderContainer,this._scrollchange),this._container},_createContainer:function(t,e){return a.a.DomUtil.create("div",t,e)},_createCheckbox:function(t,e,i,n){let o=a.a.DomUtil.create("div",e+" trackplayback-checkbox",i),r=a.a.DomUtil.create("input","trackplayback-input",o),s=`trackplayback-input-${a.a.Util.stamp(r)}`;r.setAttribute("type","checkbox"),r.setAttribute("id",s);let c=a.a.DomUtil.create("label","trackplayback-label",o);return c.setAttribute("for",s),c.innerHTML=t,a.a.DomEvent.on(r,"change",n,this),o},_createButton:function(t,e,i,n){let o=a.a.DomUtil.create("a",e,i);return o.href="#",o.title=t,o.setAttribute("role","button"),o.setAttribute("aria-label",t),a.a.DomEvent.disableClickPropagation(o),a.a.DomEvent.on(o,"click",n,this),o},_createInfo:function(t,e,i,n){let o=a.a.DomUtil.create("div","info-container",n);a.a.DomUtil.create("span","info-title",o).innerHTML=t;let r=a.a.DomUtil.create("span",i,o);return r.innerHTML=e,r},_createSlider:function(t,e,i){let n=a.a.DomUtil.create("input",t,e);return n.setAttribute("type","range"),n.setAttribute("min",this.trackPlayBack.getStartTime()),n.setAttribute("max",this.trackPlayBack.getEndTime()),n.setAttribute("value",this.trackPlayBack.getCurTime()),a.a.DomEvent.on(n,"click mousedown dbclick",a.a.DomEvent.stopPropagation).on(n,"click",a.a.DomEvent.preventDefault).on(n,"change",i,this).on(n,"mousemove",i,this),n},_showTrackPoint(t){t.target.checked?this.trackPlayBack.showTrackPoint():this.trackPlayBack.hideTrackPoint()},_showTrackLine(t){t.target.checked?this.trackPlayBack.showTrackLine():this.trackPlayBack.hideTrackLine()},_play:function(){a.a.DomUtil.hasClass(this._playBtn,"btn-stop")?(a.a.DomUtil.removeClass(this._playBtn,"btn-stop"),a.a.DomUtil.addClass(this._playBtn,"btn-start"),this._playBtn.setAttribute("title","stop"),this.trackPlayBack.start()):(a.a.DomUtil.removeClass(this._playBtn,"btn-start"),a.a.DomUtil.addClass(this._playBtn,"btn-stop"),this._playBtn.setAttribute("title","play"),this.trackPlayBack.stop())},_restart:function(){a.a.DomUtil.removeClass(this._playBtn,"btn-stop"),a.a.DomUtil.addClass(this._playBtn,"btn-start"),this._playBtn.setAttribute("title","stop"),this.trackPlayBack.rePlaying()},_slow:function(){this.trackPlayBack.slowSpeed();let t=this.trackPlayBack.getSpeed();this._infoSpeedRatio.innerHTML=`X${t}`},_quick:function(){this.trackPlayBack.quickSpeed();let t=this.trackPlayBack.getSpeed();this._infoSpeedRatio.innerHTML=`X${t}`},_close:function(){return a.a.DomUtil.remove(this._container),this.onRemove&&this.onRemove(this._map),this},_scrollchange:function(t){let e=Number(t.target.value);this.trackPlayBack.setCursor(e)},_tickCallback:function(t){let e=this.getTimeStrFromUnix(t.time);this._infoCurTime.innerHTML=e,this._slider.value=t.time,t.time>=this.trackPlayBack.getEndTime()&&(a.a.DomUtil.removeClass(this._playBtn,"btn-start"),a.a.DomUtil.addClass(this._playBtn,"btn-stop"),this._playBtn.setAttribute("title","play"),this.trackPlayBack.stop())}});a.a.TrackPlayBackControl=o,a.a.trackplaybackcontrol=function(t,e){return new o(t,e)}}])});
 //# sourceMappingURL=control.trackplayback.js.map

dist/leaflet.trackplayback.js

@@ -1,2 +1,2 @@
-!function(t,i){if("object"==typeof exports&&"object"==typeof module)module.exports=i(require("leaflet"));else if("function"==typeof define&&define.amd)define(["leaflet"],i);else{var e="object"==typeof exports?i(require("leaflet")):i(t.L);for(var s in e)("object"==typeof exports?exports:t)[s]=e[s]}}(window,function(t){return function(t){var i={};function e(s){if(i[s])return i[s].exports;var n=i[s]={i:s,l:!1,exports:{}};return t[s].call(n.exports,n,n.exports,e),n.l=!0,n.exports}return e.m=t,e.c=i,e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{enumerable:!0,get:s})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,i){if(1&i&&(t=e(t)),8&i)return t;if(4&i&&"object"==typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(e.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&i&&"string"!=typeof t)for(var n in t)e.d(s,n,function(i){return t[i]}.bind(null,n));return s},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},e.p="",e(e.s=1)}([function(i,e){i.exports=t},function(t,i,e){"use strict";e.r(i);var s=e(0),n=e.n(s);function r(t){return Array.isArray?Array.isArray(t):"[object Array]"===Object.prototype.toString.call(t)}const a=n.a.Class.extend({initialize:function(t=[],i){n.a.setOptions(this,i),t.forEach(t=>{t.isOrigin=!0}),this._trackPoints=t,this._timeTick={},this._update()},addTrackPoint:function(t){if(r(t))for(let i=0,e=t.length;i<e;i++)this.addTrackPoint(t[i]);this._addTrackPoint(t)},getTimes:function(){let t=[];for(let i=0,e=this._trackPoints.length;i<e;i++)t.push(this._trackPoints[i].time);return t},getStartTrackPoint:function(){return this._trackPoints[0]},getEndTrackPoint:function(){return this._trackPoints[this._trackPoints.length-1]},getTrackPointByTime:function(t){return this._trackPoints[this._timeTick[t]]},_getCalculateTrackPointByTime:function(t){let i=this.getTrackPointByTime(t),e=this.getStartTrackPoint(),s=this.getEndTrackPoint(),r=this.getTimes();if(t<e.time||t>s.time)return;let a,o=0,h=r.length-1;if(o===h)return i;for(;h-o!=1;)t>r[a=parseInt((o+h)/2)]?o=a:h=a;let c=r[o],l=r[h],_=t,u=this.getTrackPointByTime(c),p=this.getTrackPointByTime(l);e=n.a.point(u.lng,u.lat),s=n.a.point(p.lng,p.lat);let f=e.distanceTo(s);if(f<=0)return i=p;let d=f/(l-c),k=(s.y-e.y)/f,T=(s.x-e.x)/f,m=d*(_-c),g=e.x+m*T,x=e.y+m*k,y=s.x>=e.x?180*(.5*Math.PI-Math.asin(k))/Math.PI:180*(1.5*Math.PI+Math.asin(k))/Math.PI;return i?void 0===i.dir&&(i.dir=y):i={lng:g,lat:x,dir:y,isOrigin:!1,time:t},i},getTrackPointsBeforeTime:function(t){let i=[];for(let e=0,s=this._trackPoints.length;e<s;e++)this._trackPoints[e].time<t&&i.push(this._trackPoints[e]);let e=this._getCalculateTrackPointByTime(t);return e&&i.push(e),i},_addTrackPoint:function(t){t.isOrigin=!0,this._trackPoints.push(t),this._update()},_update:function(){this._sortTrackPointsByTime(),this._updatetimeTick()},_sortTrackPointsByTime:function(){let t=this._trackPoints.length;for(let i=0;i<t;i++)for(let e=0;e<t-1-i;e++)if(this._trackPoints[e].time>this._trackPoints[e+1].time){let t=this._trackPoints[e+1];this._trackPoints[e+1]=this._trackPoints[e],this._trackPoints[e]=t}},_updatetimeTick:function(){this._timeTick={};for(let t=0,i=this._trackPoints.length;t<i;t++)this._timeTick[this._trackPoints[t].time]=t}}),o=n.a.Class.extend({initialize:function(t=[],i,e){n.a.setOptions(this,e),this._tracks=[],this.addTrack(t),this._draw=i,this._updateTime()},getMinTime:function(){return this._minTime},getMaxTime:function(){return this._maxTime},addTrack:function(t){if(r(t))for(let i=0,e=t.length;i<e;i++)this.addTrack(t[i]);else{if(!(t instanceof a))throw new Error("tracks must be an instance of `Track` or an array of `Track` instance!");this._tracks.push(t),this._updateTime()}},drawTracksByTime:function(t){this._draw.clear();for(let i=0,e=this._tracks.length;i<e;i++){let e=this._tracks[i].getTrackPointsBeforeTime(t);e&&e.length&&this._draw.drawTrack(e)}},_updateTime:function(){this._minTime=this._tracks[0].getStartTrackPoint().time,this._maxTime=this._tracks[0].getEndTrackPoint().time;for(let t=0,i=this._tracks.length;t<i;t++){let i=this._tracks[t].getStartTrackPoint().time,e=this._tracks[t].getEndTrackPoint().time;i<this._minTime&&(this._minTime=i),e>this._maxTime&&(this._maxTime=e)}}}),h=n.a.Class.extend({includes:n.a.Mixin.Events,options:{speed:12,maxSpeed:65},initialize:function(t,i){n.a.setOptions(this,i),this._trackController=t,this._endTime=this._trackController.getMaxTime(),this._curTime=this._trackController.getMinTime(),this._speed=this.options.speed,this._maxSpeed=this.options.maxSpeed,this._intervalID=null,this._lastFpsUpdateTime=0},start:function(){this._intervalID||(this._intervalID=n.a.Util.requestAnimFrame(this._tick,this))},stop:function(){this._intervalID&&(n.a.Util.cancelAnimFrame(this._intervalID),this._intervalID=null,this._lastFpsUpdateTime=0)},rePlaying:function(){this.stop(),this._curTime=this._trackController.getMinTime(),this.start()},slowSpeed:function(){this._speed=this._speed<=1?this._speed:this._speed-1,this._intervalID&&(this.stop(),this.start())},quickSpeed:function(){this._speed=this._speed>=this._maxSpeed?this._speed:this._speed+1,this._intervalID&&(this.stop(),this.start())},getSpeed:function(){return this._speed},getCurTime:function(){return this._curTime},getStartTime:function(){return this._trackController.getMinTime()},getEndTime:function(){return this._trackController.getMaxTime()},isPlaying:function(){return!!this._intervalID},setCursor:function(t){this._curTime=t,this._trackController.drawTracksByTime(this._curTime),this.fire("tick",{time:this._curTime})},setSpeed:function(t){this._speed=t,this._intervalID&&(this.stop(),this.start())},_caculatefpsTime:function(t){let i;return i=0===this._lastFpsUpdateTime?0:t-this._lastFpsUpdateTime,this._lastFpsUpdateTime=t,i/=1e3},_tick:function(){let t=+new Date,i=!1,e=this._caculatefpsTime(t)*Math.pow(2,this._speed-1);this._curTime+=e,this._curTime>=this._endTime&&(this._curTime=this._endTime,i=!0),this._trackController.drawTracksByTime(this._curTime),this.fire("tick",{time:this._curTime}),i||(this._intervalID=n.a.Util.requestAnimFrame(this._tick,this))}}),c=n.a.Renderer.extend({initialize:function(t){n.a.Renderer.prototype.initialize.call(this,t),this.options.padding=.1},onAdd:function(t){this._container=n.a.DomUtil.create("canvas","leaflet-zoom-animated"),t.getPane(this.options.pane).appendChild(this._container),this._ctx=this._container.getContext("2d"),this._update()},onRemove:function(t){n.a.DomUtil.remove(this._container)},getContainer:function(){return this._container},getBounds:function(){return this._bounds},_update:function(){if(!this._map._animatingZoom||!this._bounds){n.a.Renderer.prototype._update.call(this);var t=this._bounds,i=this._container,e=t.getSize(),s=n.a.Browser.retina?2:1;n.a.DomUtil.setPosition(i,t.min),i.width=s*e.x,i.height=s*e.y,i.style.width=e.x+"px",i.style.height=e.y+"px",n.a.Browser.retina&&this._ctx.scale(2,2),this._ctx.translate(-t.min.x,-t.min.y),this.fire("update")}}}),l=n.a.Class.extend({trackPointOptions:{isDraw:!1,useCanvas:!0,stroke:!1,color:"#ef0300",fill:!0,fillColor:"#ef0300",opacity:.3,radius:4},trackLineOptions:{isDraw:!1,stroke:!0,color:"#1C54E2",weight:2,fill:!1,fillColor:"#000",opacity:.3},targetOptions:{useImg:!1,imgUrl:"../../static/images/ship.png",showText:!1,width:8,height:18,color:"#00f",fillColor:"#9FD12D"},toolTipOptions:{offset:[0,0],direction:"top",permanent:!1},initialize:function(t,i){if(n.a.extend(this.trackPointOptions,i.trackPointOptions),n.a.extend(this.trackLineOptions,i.trackLineOptions),n.a.extend(this.targetOptions,i.targetOptions),n.a.extend(this.toolTipOptions,i.toolTipOptions),this._showTrackPoint=this.trackPointOptions.isDraw,this._showTrackLine=this.trackLineOptions.isDraw,this._map=t,this._map.on("mousemove",this._onmousemoveEvt,this),this._trackLayer=(new c).addTo(t),this._trackLayer.on("update",this._trackLayerUpdate,this),this._canvas=this._trackLayer.getContainer(),this._ctx=this._canvas.getContext("2d"),this._bufferTracks=[],this.trackPointOptions.useCanvas||(this._trackPointFeatureGroup=n.a.featureGroup([]).addTo(t)),this.targetOptions.useImg){const t=new Image;t.onload=(()=>{this._targetImg=t}),t.onerror=(()=>{throw new Error("img load error!")}),t.src=this.targetOptions.imgUrl}},update:function(){this._trackLayerUpdate()},drawTrack:function(t){this._bufferTracks.push(t),this._drawTrack(t)},showTrackPoint:function(){this._showTrackPoint=!0,this.update()},hideTrackPoint:function(){this._showTrackPoint=!1,this.update()},showTrackLine:function(){this._showTrackLine=!0,this.update()},hideTrackLine:function(){this._showTrackLine=!1,this.update()},remove:function(){this._bufferTracks=[],this._trackLayer.off("update",this._trackLayerUpdate,this),this._map.off("mousemove",this._onmousemoveEvt,this),this._map.hasLayer(this._trackLayer)&&this._map.removeLayer(this._trackLayer),this._map.hasLayer(this._trackPointFeatureGroup)&&this._map.removeLayer(this._trackPointFeatureGroup)},clear:function(){this._clearLayer(),this._bufferTracks=[]},_trackLayerUpdate:function(){this._bufferTracks.length&&(this._clearLayer(),this._bufferTracks.forEach(function(t,i){this._drawTrack(t)}.bind(this)))},_onmousemoveEvt:function(t){if(!this._showTrackPoint)return;let i=t.layerPoint;if(this._bufferTracks.length)for(let t=0,e=this._bufferTracks.length;t<e;t++)for(let e=0,s=this._bufferTracks[t].length;e<s;e++){let s=this._getLayerPoint(this._bufferTracks[t][e]);if(i.distanceTo(s)<=this.trackPointOptions.radius)return void this._opentoolTip(this._bufferTracks[t][e])}this._map.hasLayer(this._tooltip)&&this._map.removeLayer(this._tooltip),this._canvas.style.cursor="pointer"},_opentoolTip:function(t){this._map.hasLayer(this._tooltip)&&this._map.removeLayer(this._tooltip),this._canvas.style.cursor="default";let i=n.a.latLng(t.lat,t.lng),e=this._tooltip=n.a.tooltip(this.toolTipOptions);e.setLatLng(i),e.addTo(this._map),e.setContent(this._getTooltipText(t))},_drawTrack:function(t){this._showTrackLine&&this._drawTrackLine(t);let i=t[t.length-1];this.targetOptions.useImg&&this._targetImg?this._drawShipImage(i):this._drawShipCanvas(i),this.targetOptions.showText&&this._drawtxt(`航向：${parseInt(i.dir)}度`,i),this._showTrackPoint&&(this.trackPointOptions.useCanvas?this._drawTrackPointsCanvas(t):this._drawTrackPointsSvg(t))},_drawTrackLine:function(t){let i=this.trackLineOptions,e=this._getLayerPoint(t[0]);this._ctx.save(),this._ctx.beginPath(),this._ctx.moveTo(e.x,e.y);for(let i=1,e=t.length;i<e;i++){let e=this._getLayerPoint(t[i]);this._ctx.lineTo(e.x,e.y)}this._ctx.globalAlpha=i.opacity,i.stroke&&(this._ctx.strokeStyle=i.color,this._ctx.lineWidth=i.weight,this._ctx.stroke()),i.fill&&(this._ctx.fillStyle=i.fillColor,this._ctx.fill()),this._ctx.restore()},_drawTrackPointsCanvas:function(t){let i=this.trackPointOptions;this._ctx.save();for(let e=0,s=t.length;e<s;e++)if(t[e].isOrigin){let s=n.a.latLng(t[e].lat,t[e].lng),r=i.radius,a=this._map.latLngToLayerPoint(s);this._ctx.beginPath(),this._ctx.arc(a.x,a.y,r,0,2*Math.PI,!1),this._ctx.globalAlpha=i.opacity,i.stroke&&(this._ctx.strokeStyle=i.color,this._ctx.stroke()),i.fill&&(this._ctx.fillStyle=i.fillColor,this._ctx.fill())}this._ctx.restore()},_drawTrackPointsSvg:function(t){for(let i=0,e=t.length;i<e;i++)if(t[i].isOrigin){let e=n.a.latLng(t[i].lat,t[i].lng),s=n.a.circleMarker(e,this.trackPointOptions);s.bindTooltip(this._getTooltipText(t[i]),this.toolTipOptions),this._trackPointFeatureGroup.addLayer(s)}},_drawtxt:function(t,i){let e=this._getLayerPoint(i);this._ctx.save(),this._ctx.font="12px Verdana",this._ctx.fillStyle="#000",this._ctx.textAlign="center",this._ctx.textBaseline="bottom",this._ctx.fillText(t,e.x,e.y-12,200),this._ctx.restore()},_drawShipCanvas:function(t){let i=this._getLayerPoint(t),e=t.dir||0,s=this.targetOptions.width,n=this.targetOptions.height,r=n/3;this._ctx.save(),this._ctx.fillStyle=this.targetOptions.fillColor,this._ctx.strokeStyle=this.targetOptions.color,this._ctx.translate(i.x,i.y),this._ctx.rotate(Math.PI/180*e),this._ctx.beginPath(),this._ctx.moveTo(0,0-n/2),this._ctx.lineTo(0-s/2,0-n/2+r),this._ctx.lineTo(0-s/2,0+n/2),this._ctx.lineTo(0+s/2,0+n/2),this._ctx.lineTo(0+s/2,0-n/2+r),this._ctx.closePath(),this._ctx.fill(),this._ctx.stroke(),this._ctx.restore()},_drawShipImage:function(t){let i=this._getLayerPoint(t),e=t.dir||0,s=this.targetOptions.width,n=this.targetOptions.height,r=s/2,a=n/2;this._ctx.save(),this._ctx.translate(i.x,i.y),this._ctx.rotate(Math.PI/180*e),this._ctx.drawImage(this._targetImg,0-r,0-a,s,n),this._ctx.restore()},_getTooltipText:function(t){let i=[];if(i.push("<table>"),t.info&&t.info.length)for(let e=0,s=t.info.length;e<s;e++)i.push("<tr>"),i.push("<td>"+t.info[e].key+"</td>"),i.push("<td>"+t.info[e].value+"</td>"),i.push("</tr>");return i.push("</table>"),i=i.join("")},_clearLayer:function(){let t=this._trackLayer.getBounds();if(t){let i=t.getSize();this._ctx.clearRect(t.min.x,t.min.y,i.x,i.y)}else this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height);this._map.hasLayer(this._trackPointFeatureGroup)&&this._trackPointFeatureGroup.clearLayers()},_getLayerPoint(t){return this._map.latLngToLayerPoint(n.a.latLng(t.lat,t.lng))}}),_=n.a.Class.extend({includes:n.a.Mixin.Events,initialize:function(t,i,e={}){let s={trackPointOptions:e.trackPointOptions,trackLineOptions:e.trackLineOptions,targetOptions:e.targetOptions,toolTipOptions:e.toolTipOptions};this.tracks=this._initTracks(t),this.draw=new l(i,s),this.trackController=new o(this.tracks,this.draw),this.clock=new h(this.trackController,e.clockOptions),this.clock.on("tick",this._tick,this)},start:function(){return this.clock.start(),this},stop:function(){return this.clock.stop(),this},rePlaying:function(){return this.clock.rePlaying(),this},slowSpeed:function(){return this.clock.slowSpeed(),this},quickSpeed:function(){return this.clock.quickSpeed(),this},getSpeed:function(){return this.clock.getSpeed()},getCurTime:function(){return this.clock.getCurTime()},getStartTime:function(){return this.clock.getStartTime()},getEndTime:function(){return this.clock.getEndTime()},isPlaying:function(){return this.clock.isPlaying()},setCursor:function(t){return this.clock.setCursor(t),this},setSpeed:function(t){return this.clock.setSpeed(t),this},showTrackPoint:function(){return this.draw.showTrackPoint(),this},hideTrackPoint:function(){return this.draw.hideTrackPoint(),this},showTrackLine:function(){return this.draw.showTrackLine(),this},hideTrackLine:function(){return this.draw.hideTrackLine(),this},dispose:function(){this.clock.off("tick",this._tick),this.draw.remove(),this.tracks=null,this.draw=null,this.trackController=null,this.clock=null},_tick:function(t){this.fire("tick",t)},_initTracks:function(t){let i=[];if(r(t))if(r(t[0]))for(let e=0,s=t.length;e<s;e++)i.push(new a(t[e]));else i.push(new a(t));return i}});n.a.TrackPlayBack=_,n.a.trackplayback=function(t,i,e){return new _(t,i,e)}}])});
+!function(t,i){if("object"==typeof exports&&"object"==typeof module)module.exports=i(require("leaflet"));else if("function"==typeof define&&define.amd)define(["leaflet"],i);else{var e="object"==typeof exports?i(require("leaflet")):i(t.L);for(var s in e)("object"==typeof exports?exports:t)[s]=e[s]}}(window,function(t){return function(t){var i={};function e(s){if(i[s])return i[s].exports;var n=i[s]={i:s,l:!1,exports:{}};return t[s].call(n.exports,n,n.exports,e),n.l=!0,n.exports}return e.m=t,e.c=i,e.d=function(t,i,s){e.o(t,i)||Object.defineProperty(t,i,{enumerable:!0,get:s})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,i){if(1&i&&(t=e(t)),8&i)return t;if(4&i&&"object"==typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(e.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&i&&"string"!=typeof t)for(var n in t)e.d(s,n,function(i){return t[i]}.bind(null,n));return s},e.n=function(t){var i=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(i,"a",i),i},e.o=function(t,i){return Object.prototype.hasOwnProperty.call(t,i)},e.p="",e(e.s=1)}([function(i,e){i.exports=t},function(t,i,e){"use strict";e.r(i);var s=e(0),n=e.n(s);function r(t){return Array.isArray?Array.isArray(t):"[object Array]"===Object.prototype.toString.call(t)}const a=n.a.Class.extend({initialize:function(t=[],i){n.a.setOptions(this,i),t.forEach(t=>{t.isOrigin=!0}),this._trackPoints=t,this._timeTick={},this._update()},addTrackPoint:function(t){if(r(t))for(let i=0,e=t.length;i<e;i++)this.addTrackPoint(t[i]);this._addTrackPoint(t)},getTimes:function(){let t=[];for(let i=0,e=this._trackPoints.length;i<e;i++)t.push(this._trackPoints[i].time);return t},getStartTrackPoint:function(){return this._trackPoints[0]},getEndTrackPoint:function(){return this._trackPoints[this._trackPoints.length-1]},getTrackPointByTime:function(t){return this._trackPoints[this._timeTick[t]]},_getCalculateTrackPointByTime:function(t){let i=this.getTrackPointByTime(t),e=this.getStartTrackPoint(),s=this.getEndTrackPoint(),r=this.getTimes();if(t<e.time||t>s.time)return;let a,o=0,h=r.length-1;if(o===h)return i;for(;h-o!=1;)t>r[a=parseInt((o+h)/2)]?o=a:h=a;let c=r[o],l=r[h],_=t,u=this.getTrackPointByTime(c),p=this.getTrackPointByTime(l);e=n.a.point(u.lng,u.lat),s=n.a.point(p.lng,p.lat);let f=e.distanceTo(s);if(f<=0)return i=p;let d=f/(l-c),k=(s.y-e.y)/f,T=(s.x-e.x)/f,m=d*(_-c),g=e.x+m*T,x=e.y+m*k,y=s.x>=e.x?180*(.5*Math.PI-Math.asin(k))/Math.PI:180*(1.5*Math.PI+Math.asin(k))/Math.PI;return i?void 0===i.dir&&(i.dir=y):i={lng:g,lat:x,dir:y,isOrigin:!1,time:t},i},getTrackPointsBeforeTime:function(t){let i=[];for(let e=0,s=this._trackPoints.length;e<s;e++)this._trackPoints[e].time<t&&i.push(this._trackPoints[e]);let e=this._getCalculateTrackPointByTime(t);return e&&i.push(e),i},_addTrackPoint:function(t){t.isOrigin=!0,this._trackPoints.push(t),this._update()},_update:function(){this._sortTrackPointsByTime(),this._updatetimeTick()},_sortTrackPointsByTime:function(){let t=this._trackPoints.length;for(let i=0;i<t;i++)for(let e=0;e<t-1-i;e++)if(this._trackPoints[e].time>this._trackPoints[e+1].time){let t=this._trackPoints[e+1];this._trackPoints[e+1]=this._trackPoints[e],this._trackPoints[e]=t}},_updatetimeTick:function(){this._timeTick={};for(let t=0,i=this._trackPoints.length;t<i;t++)this._timeTick[this._trackPoints[t].time]=t}}),o=n.a.Class.extend({initialize:function(t=[],i,e){n.a.setOptions(this,e),this._tracks=[],this.addTrack(t),this._draw=i,this._updateTime()},getMinTime:function(){return this._minTime},getMaxTime:function(){return this._maxTime},addTrack:function(t){if(r(t))for(let i=0,e=t.length;i<e;i++)this.addTrack(t[i]);else{if(!(t instanceof a))throw new Error("tracks must be an instance of `Track` or an array of `Track` instance!");this._tracks.push(t),this._updateTime()}},drawTracksByTime:function(t){this._draw.clear();for(let i=0,e=this._tracks.length;i<e;i++){let e=this._tracks[i].getTrackPointsBeforeTime(t);e&&e.length&&this._draw.drawTrack(e)}},_updateTime:function(){this._minTime=this._tracks[0].getStartTrackPoint().time,this._maxTime=this._tracks[0].getEndTrackPoint().time;for(let t=0,i=this._tracks.length;t<i;t++){let i=this._tracks[t].getStartTrackPoint().time,e=this._tracks[t].getEndTrackPoint().time;i<this._minTime&&(this._minTime=i),e>this._maxTime&&(this._maxTime=e)}}}),h=n.a.Class.extend({includes:n.a.Mixin.Events,options:{speed:6,maxSpeed:65},initialize:function(t,i){n.a.setOptions(this,i),this._trackController=t,this._endTime=this._trackController.getMaxTime(),this._curTime=this._trackController.getMinTime(),this._speed=this.options.speed,this._maxSpeed=this.options.maxSpeed,this._intervalID=null,this._lastFpsUpdateTime=0},start:function(){this._intervalID||(this._intervalID=n.a.Util.requestAnimFrame(this._tick,this))},stop:function(){this._intervalID&&(n.a.Util.cancelAnimFrame(this._intervalID),this._intervalID=null,this._lastFpsUpdateTime=0)},rePlaying:function(){this.stop(),this._curTime=this._trackController.getMinTime(),this.start()},slowSpeed:function(){this._speed=this._speed<=1?this._speed:this._speed-1,this._intervalID&&(this.stop(),this.start())},quickSpeed:function(){this._speed=this._speed>=this._maxSpeed?this._speed:this._speed+1,this._intervalID&&(this.stop(),this.start())},getSpeed:function(){return this._speed},getCurTime:function(){return this._curTime},getStartTime:function(){return this._trackController.getMinTime()},getEndTime:function(){return this._trackController.getMaxTime()},isPlaying:function(){return!!this._intervalID},setCursor:function(t){this._curTime=t,this._trackController.drawTracksByTime(this._curTime),this.fire("tick",{time:this._curTime})},setSpeed:function(t){this._speed=t,this._intervalID&&(this.stop(),this.start())},_caculatefpsTime:function(t){let i;return i=0===this._lastFpsUpdateTime?0:t-this._lastFpsUpdateTime,this._lastFpsUpdateTime=t,i/=1e3},_tick:function(){let t=+new Date,i=!1,e=this._caculatefpsTime(t)*Math.pow(2,this._speed-1);this._curTime+=e,this._curTime>=this._endTime&&(this._curTime=this._endTime,i=!0),this._trackController.drawTracksByTime(this._curTime),this.fire("tick",{time:this._curTime}),i||(this._intervalID=n.a.Util.requestAnimFrame(this._tick,this))}}),c=n.a.Renderer.extend({initialize:function(t){n.a.Renderer.prototype.initialize.call(this,t),this.options.padding=.1},onAdd:function(t){this._container=n.a.DomUtil.create("canvas","leaflet-zoom-animated"),t.getPane(this.options.pane).appendChild(this._container),this._ctx=this._container.getContext("2d"),this._update()},onRemove:function(t){n.a.DomUtil.remove(this._container)},getContainer:function(){return this._container},getBounds:function(){return this._bounds},_update:function(){if(!this._map._animatingZoom||!this._bounds){n.a.Renderer.prototype._update.call(this);var t=this._bounds,i=this._container,e=t.getSize(),s=n.a.Browser.retina?2:1;n.a.DomUtil.setPosition(i,t.min),i.width=s*e.x,i.height=s*e.y,i.style.width=e.x+"px",i.style.height=e.y+"px",n.a.Browser.retina&&this._ctx.scale(2,2),this._ctx.translate(-t.min.x,-t.min.y),this.fire("update")}}}),l=n.a.Class.extend({trackPointOptions:{isDraw:!1,useCanvas:!0,stroke:!1,color:"#ef0300",fill:!0,fillColor:"#ef0300",opacity:.3,radius:4},trackLineOptions:{isDraw:!1,stroke:!0,color:"#1C54E2",weight:2,fill:!1,fillColor:"#000",opacity:.3},targetOptions:{useImg:!1,imgUrl:"../../static/images/ship.png",showText:!1,width:8,height:18,color:"#00f",fillColor:"#9FD12D"},toolTipOptions:{offset:[0,0],direction:"top",permanent:!1},initialize:function(t,i){if(n.a.extend(this.trackPointOptions,i.trackPointOptions),n.a.extend(this.trackLineOptions,i.trackLineOptions),n.a.extend(this.targetOptions,i.targetOptions),n.a.extend(this.toolTipOptions,i.toolTipOptions),this._showTrackPoint=this.trackPointOptions.isDraw,this._showTrackLine=this.trackLineOptions.isDraw,this._map=t,this._map.on("mousemove",this._onmousemoveEvt,this),this._trackLayer=(new c).addTo(t),this._trackLayer.on("update",this._trackLayerUpdate,this),this._canvas=this._trackLayer.getContainer(),this._ctx=this._canvas.getContext("2d"),this._bufferTracks=[],this.trackPointOptions.useCanvas||(this._trackPointFeatureGroup=n.a.featureGroup([]).addTo(t)),this.targetOptions.useImg){const t=new Image;t.onload=(()=>{this._targetImg=t}),t.onerror=(()=>{throw new Error("img load error!")}),t.src=this.targetOptions.imgUrl}},update:function(){this._trackLayerUpdate()},drawTrack:function(t){this._bufferTracks.push(t),this._drawTrack(t)},showTrackPoint:function(){this._showTrackPoint=!0,this.update()},hideTrackPoint:function(){this._showTrackPoint=!1,this.update()},showTrackLine:function(){this._showTrackLine=!0,this.update()},hideTrackLine:function(){this._showTrackLine=!1,this.update()},remove:function(){this._bufferTracks=[],this._trackLayer.off("update",this._trackLayerUpdate,this),this._map.off("mousemove",this._onmousemoveEvt,this),this._map.hasLayer(this._trackLayer)&&this._map.removeLayer(this._trackLayer),this._map.hasLayer(this._trackPointFeatureGroup)&&this._map.removeLayer(this._trackPointFeatureGroup)},clear:function(){this._clearLayer(),this._bufferTracks=[]},_trackLayerUpdate:function(){this._bufferTracks.length&&(this._clearLayer(),this._bufferTracks.forEach(function(t,i){this._drawTrack(t)}.bind(this)))},_onmousemoveEvt:function(t){if(!this._showTrackPoint)return;let i=t.layerPoint;if(this._bufferTracks.length)for(let t=0,e=this._bufferTracks.length;t<e;t++)for(let e=0,s=this._bufferTracks[t].length;e<s;e++){let s=this._getLayerPoint(this._bufferTracks[t][e]);if(i.distanceTo(s)<=this.trackPointOptions.radius)return void this._opentoolTip(this._bufferTracks[t][e])}this._map.hasLayer(this._tooltip)&&this._map.removeLayer(this._tooltip),this._canvas.style.cursor="pointer"},_opentoolTip:function(t){this._map.hasLayer(this._tooltip)&&this._map.removeLayer(this._tooltip),this._canvas.style.cursor="default";let i=n.a.latLng(t.lat,t.lng),e=this._tooltip=n.a.tooltip(this.toolTipOptions);e.setLatLng(i),e.addTo(this._map),e.setContent(this._getTooltipText(t))},_drawTrack:function(t){this._showTrackLine&&this._drawTrackLine(t);let i=t[t.length-1];this.targetOptions.useImg&&this._targetImg?this._drawShipImage(i):this._drawShipCanvas(i),this.targetOptions.showText&&this._drawtxt(`航向：${parseInt(i.dir)}度`,i),this._showTrackPoint&&(this.trackPointOptions.useCanvas?this._drawTrackPointsCanvas(t):this._drawTrackPointsSvg(t))},_drawTrackLine:function(t){let i=this.trackLineOptions,e=this._getLayerPoint(t[0]);this._ctx.save(),this._ctx.beginPath(),this._ctx.moveTo(e.x,e.y);for(let i=1,e=t.length;i<e;i++){let e=this._getLayerPoint(t[i]);this._ctx.lineTo(e.x,e.y)}this._ctx.globalAlpha=i.opacity,i.stroke&&(this._ctx.strokeStyle=i.color,this._ctx.lineWidth=i.weight,this._ctx.stroke()),i.fill&&(this._ctx.fillStyle=i.fillColor,this._ctx.fill()),this._ctx.restore()},_drawTrackPointsCanvas:function(t){let i=this.trackPointOptions;this._ctx.save();for(let e=0,s=t.length;e<s;e++)if(t[e].isOrigin){let s=n.a.latLng(t[e].lat,t[e].lng),r=i.radius,a=this._map.latLngToLayerPoint(s);this._ctx.beginPath(),this._ctx.arc(a.x,a.y,r,0,2*Math.PI,!1),this._ctx.globalAlpha=i.opacity,i.stroke&&(this._ctx.strokeStyle=i.color,this._ctx.stroke()),i.fill&&(this._ctx.fillStyle=i.fillColor,this._ctx.fill())}this._ctx.restore()},_drawTrackPointsSvg:function(t){for(let i=0,e=t.length;i<e;i++)if(t[i].isOrigin){let e=n.a.latLng(t[i].lat,t[i].lng),s=n.a.circleMarker(e,this.trackPointOptions);s.bindTooltip(this._getTooltipText(t[i]),this.toolTipOptions),this._trackPointFeatureGroup.addLayer(s)}},_drawtxt:function(t,i){let e=this._getLayerPoint(i);this._ctx.save(),this._ctx.font="12px Verdana",this._ctx.fillStyle="#000",this._ctx.textAlign="center",this._ctx.textBaseline="bottom",this._ctx.fillText(t,e.x,e.y-12,200),this._ctx.restore()},_drawShipCanvas:function(t){let i=this._getLayerPoint(t),e=t.dir||0,s=this.targetOptions.width,n=this.targetOptions.height,r=n/3;this._ctx.save(),this._ctx.fillStyle=this.targetOptions.fillColor,this._ctx.strokeStyle=this.targetOptions.color,this._ctx.translate(i.x,i.y),this._ctx.rotate(Math.PI/180*e),this._ctx.beginPath(),this._ctx.moveTo(0,0-n/2),this._ctx.lineTo(0-s/2,0-n/2+r),this._ctx.lineTo(0-s/2,0+n/2),this._ctx.lineTo(0+s/2,0+n/2),this._ctx.lineTo(0+s/2,0-n/2+r),this._ctx.closePath(),this._ctx.fill(),this._ctx.stroke(),this._ctx.restore()},_drawShipImage:function(t){let i=this._getLayerPoint(t),e=t.dir||0,s=this.targetOptions.width,n=this.targetOptions.height,r=s/2,a=n/2;this._ctx.save(),this._ctx.translate(i.x,i.y),this._ctx.rotate(Math.PI/180*e),this._ctx.drawImage(this._targetImg,0-r,0-a,s,n),this._ctx.restore()},_getTooltipText:function(t){let i=[];if(i.push("<table>"),t.info&&t.info.length)for(let e=0,s=t.info.length;e<s;e++)i.push("<tr>"),i.push("<td>"+t.info[e].key+"</td>"),i.push("<td>"+t.info[e].value+"</td>"),i.push("</tr>");return i.push("</table>"),i=i.join("")},_clearLayer:function(){let t=this._trackLayer.getBounds();if(t){let i=t.getSize();this._ctx.clearRect(t.min.x,t.min.y,i.x,i.y)}else this._ctx.clearRect(0,0,this._canvas.width,this._canvas.height);this._map.hasLayer(this._trackPointFeatureGroup)&&this._trackPointFeatureGroup.clearLayers()},_getLayerPoint(t){return this._map.latLngToLayerPoint(n.a.latLng(t.lat,t.lng))}}),_=n.a.Class.extend({includes:n.a.Mixin.Events,initialize:function(t,i,e={}){let s={trackPointOptions:e.trackPointOptions,trackLineOptions:e.trackLineOptions,targetOptions:e.targetOptions,toolTipOptions:e.toolTipOptions};this.tracks=this._initTracks(t),this.draw=new l(i,s),this.trackController=new o(this.tracks,this.draw),this.clock=new h(this.trackController,e.clockOptions),this.clock.on("tick",this._tick,this)},start:function(){return this.clock.start(),this},stop:function(){return this.clock.stop(),this},rePlaying:function(){return this.clock.rePlaying(),this},slowSpeed:function(){return this.clock.slowSpeed(),this},quickSpeed:function(){return this.clock.quickSpeed(),this},getSpeed:function(){return this.clock.getSpeed()},getCurTime:function(){return this.clock.getCurTime()},getStartTime:function(){return this.clock.getStartTime()},getEndTime:function(){return this.clock.getEndTime()},isPlaying:function(){return this.clock.isPlaying()},setCursor:function(t){return this.clock.setCursor(t),this},setSpeed:function(t){return this.clock.setSpeed(t),this},showTrackPoint:function(){return this.draw.showTrackPoint(),this},hideTrackPoint:function(){return this.draw.hideTrackPoint(),this},showTrackLine:function(){return this.draw.showTrackLine(),this},hideTrackLine:function(){return this.draw.hideTrackLine(),this},dispose:function(){this.clock.off("tick",this._tick),this.draw.remove(),this.tracks=null,this.draw=null,this.trackController=null,this.clock=null},_tick:function(t){this.fire("tick",t)},_initTracks:function(t){let i=[];if(r(t))if(r(t[0]))for(let e=0,s=t.length;e<s;e++)i.push(new a(t[e]));else i.push(new a(t));return i}});n.a.TrackPlayBack=_,n.a.trackplayback=function(t,i,e){return new _(t,i,e)}}])});
 //# sourceMappingURL=leaflet.trackplayback.js.map

examples/data/locations.js

@@ -0,0 +1,33 @@
+var locations = {
+"type": "FeatureCollection",
+"name": "locations",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": 1, "Name": "สำนักงานเขตสาทร", "Class": 2, "District": "สาทร", "1-2": 1.82, "2-3": 20.1 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.525909672773281, 13.70822657498778 ], [ 100.525936117852339, 13.708371159882731 ], [ 100.526464242993725, 13.708292663384462 ], [ 100.5264765480199, 13.708125759112233 ], [ 100.526644593146358, 13.708048667440288 ], [ 100.526626470418279, 13.707832883908985 ], [ 100.525974642420479, 13.707925228759645 ], [ 100.525864342095844, 13.707942265236898 ], [ 100.525909672773281, 13.70822657498778 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 2, "Name": "สำนักงานเขตบางซื่อ", "Class": 2, "District": "บางซื่อ", "1-2": 5.04, "2-3": 26.42 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.537192860987389, 13.809763491460378 ], [ 100.537181074706865, 13.809880984032665 ], [ 100.537359461988615, 13.809896216300555 ], [ 100.537386240152202, 13.809897917109463 ], [ 100.537477613720867, 13.809909957130952 ], [ 100.53762064402558, 13.809927279041927 ], [ 100.537667478252317, 13.809926051539378 ], [ 100.537683943748775, 13.809812906523204 ], [ 100.537698901656327, 13.809761430170207 ], [ 100.537701469290013, 13.809715636789576 ], [ 100.537705152106241, 13.809694126422528 ], [ 100.537706904697089, 13.809669825450696 ], [ 100.537648513677297, 13.809658046093174 ], [ 100.537624732744817, 13.809658937404748 ], [ 100.537224271619039, 13.809630799470211 ], [ 100.537203106931287, 13.809638142593734 ], [ 100.537202462332033, 13.809680509090626 ], [ 100.537175699102619, 13.809677972640355 ], [ 100.537171335925237, 13.809715855770607 ], [ 100.537197176900023, 13.809718397994246 ], [ 100.537197182807674, 13.809719299286234 ], [ 100.537197182807674, 13.809719299286234 ], [ 100.537192860987389, 13.809763491460378 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 3, "Name": "จุดจอดรถเขตบางซื่อ", "Class": 1, "District": "บางซื่อ", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.512226297242179, 13.820652546569415 ], [ 100.512195275958064, 13.820705015322588 ], [ 100.512195275958064, 13.820705015322588 ], [ 100.512195275958064, 13.820705015322588 ], [ 100.512141584053751, 13.820674700723439 ], [ 100.512052023240244, 13.820803242559009 ], [ 100.511930237230828, 13.820946879467115 ], [ 100.512616583415166, 13.821527483429264 ], [ 100.513044640713261, 13.821194123468079 ], [ 100.512226297242179, 13.820652546569415 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 4, "Name": "จุดจอดรถเขตสาทร", "Class": 1, "District": "สาทร", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.51889232155041, 13.714273238417514 ], [ 100.519780492792293, 13.714184854626415 ], [ 100.519788864904328, 13.71376658045916 ], [ 100.518841647812067, 13.713848116273153 ], [ 100.518841647812067, 13.713848116273153 ], [ 100.51889232155041, 13.714273238417514 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 5, "Name": "จุดจอดรถเขตบางคอแหลม", "Class": 1, "District": "บางคอแหลม", "1-2": 1.6, "2-3": 21.04 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.512276144877319, 13.692943947931187 ], [ 100.511751622950115, 13.693187685962815 ], [ 100.51215904562919, 13.693857421532115 ], [ 100.512627922885059, 13.693565876184408 ], [ 100.512276144877319, 13.692943947931187 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 6, "Name": "สำนักงานเขตบางคอแหลม", "Class": 2, "District": "บางคอแหลม", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.502428196168324, 13.692683284127687 ], [ 100.502065743370565, 13.692858536029895 ], [ 100.502328576385594, 13.693418439401643 ], [ 100.502448113837715, 13.693364957577652 ], [ 100.502480970888882, 13.693272767798755 ], [ 100.502526277488613, 13.693252354935144 ], [ 100.5026786271536, 13.693173192854317 ], [ 100.502428196168324, 13.692683284127687 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 7, "Name": "โรงกำจัดสิ่งปฏิกูลอ่อนนุช", "Class": 3, "District": "ประเวศ", "1-2": 1.12, "2-3": 3.0 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.681374481740789, 13.71382597045355 ], [ 100.681666269538766, 13.71376938858705 ], [ 100.681960090419508, 13.713728252531372 ], [ 100.68217229996344, 13.713697327292389 ], [ 100.682332436173795, 13.713689320481873 ], [ 100.682490971022048, 13.713706935465009 ], [ 100.682705553543911, 13.713746969517597 ], [ 100.682971236530818, 13.71383853473475 ], [ 100.682978623910216, 13.71384028698132 ], [ 100.682976780275908, 13.71384029953677 ], [ 100.681808651483905, 13.712656761885322 ], [ 100.681112198250943, 13.713304993577037 ], [ 100.680907223901698, 13.713533988357835 ], [ 100.680839966693341, 13.713641279618766 ], [ 100.680791456693683, 13.713768649516776 ], [ 100.680770269314166, 13.713900380319339 ], [ 100.681374481740789, 13.71382597045355 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 8, "Name": "สำนักงานเขตประเวศ", "Class": 2, "District": "ประเวศ", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.694482902513201, 13.717447467996505 ], [ 100.694650311436675, 13.717437923098542 ], [ 100.694793649378312, 13.717425184535623 ], [ 100.694784229661479, 13.717309374941292 ], [ 100.694630483570251, 13.717307910520145 ], [ 100.694487109530669, 13.717315611219307 ], [ 100.694482902513201, 13.717447467996505 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 9, "Name": "จุดจอดรถเขตประเวศ", "Class": 1, "District": "ประเวศ", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.700111459551763, 13.721665011398692 ], [ 100.699701880421642, 13.721661847317067 ], [ 100.699509464145365, 13.721763365814832 ], [ 100.699368676668314, 13.721918479833434 ], [ 100.699298865371802, 13.722076959113977 ], [ 100.699282683499277, 13.722305209078815 ], [ 100.699242119914231, 13.722817409825007 ], [ 100.699245233990098, 13.723249998244498 ], [ 100.699276290170573, 13.723466089478462 ], [ 100.699335703620463, 13.723523361979231 ], [ 100.69940997047334, 13.723594952580024 ], [ 100.69954349518261, 13.723702186174551 ], [ 100.699720853367666, 13.723751436703152 ], [ 100.699912597707268, 13.723750116941401 ], [ 100.700133062185458, 13.723640446905639 ], [ 100.700272092324909, 13.72348807639365 ], [ 100.700314575158401, 13.723242638459189 ], [ 100.7001262609066, 13.721672119680106 ], [ 100.7001262609066, 13.721672119680106 ], [ 100.7001262609066, 13.721672119680106 ], [ 100.700111459551763, 13.721665011398692 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 10, "Name": "จุดจอดรถเขตบางกะปิ", "Class": 1, "District": "บางกะปิ", "1-2": 0.14, "2-3": 10.66 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.647640417056024, 13.767238337288761 ], [ 100.647707891776591, 13.766866554851079 ], [ 100.647707891776591, 13.766866554851079 ], [ 100.64746802224316, 13.766848331374055 ], [ 100.647309418544936, 13.766847589824582 ], [ 100.647305932309436, 13.76687645439049 ], [ 100.647293856687682, 13.766995505304687 ], [ 100.647293174437735, 13.76702975884661 ], [ 100.647259121988952, 13.767038999527221 ], [ 100.647245353704548, 13.767179692697589 ], [ 100.647324813432348, 13.767202594659583 ], [ 100.647640417056024, 13.767238337288761 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 11, "Name": "สำนักงานเขตบางกะปิ", "Class": 2, "District": "บางกะปิ", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.647358209883322, 13.765914429407614 ], [ 100.647518808478935, 13.76593678857933 ], [ 100.647550550359469, 13.765729279786196 ], [ 100.647566389733115, 13.765621019155894 ], [ 100.647568094970296, 13.765601179392569 ], [ 100.647435132450752, 13.765575030205094 ], [ 100.647403770601727, 13.765573437417983 ], [ 100.647358209883322, 13.765914429407614 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 12, "Name": "จุดจอดรถเขตสายไหม", "Class": 1, "District": "สายไหม", "1-2": 3.23, "2-3": 30.72 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.660486062457522, 13.913421063816491 ], [ 100.660795558330392, 13.912566990043585 ], [ 100.65991588686002, 13.912320752026259 ], [ 100.659543099436149, 13.913150967189937 ], [ 100.660486062457522, 13.913421063816491 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 13, "Name": "สำนักงานเขตสายไหม", "Class": 2, "District": "สายไหม", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.660517726941762, 13.895316609428745 ], [ 100.660850457485679, 13.895348433409659 ], [ 100.660874542858366, 13.895348526969132 ], [ 100.661249618943415, 13.89538163684589 ], [ 100.661268781437826, 13.894984482294349 ], [ 100.660480220742116, 13.894900165578816 ], [ 100.660174018804284, 13.894872354175106 ], [ 100.660376000159857, 13.895304437883867 ], [ 100.660517726941762, 13.895316609428745 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 14, "Name": "จุดจอดรถเทศบาลนครนนทบุรี", "Class": 1, "District": "เทศบาลนครนนทบุรี", "1-2": 3.4, "2-3": 3.4 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.527639459849283, 13.867836826829961 ], [ 100.528381872483678, 13.867767719213722 ], [ 100.52840253393866, 13.867282515124616 ], [ 100.528750222957825, 13.867205107182558 ], [ 100.528735803481652, 13.867048184455069 ], [ 100.528362770776397, 13.86710446089573 ], [ 100.528336068039792, 13.866971231126103 ], [ 100.527614557595669, 13.867100984333305 ], [ 100.527543671162746, 13.867120393046372 ], [ 100.527585311318319, 13.8678448012493 ], [ 100.527639459849283, 13.867836826829961 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 15, "Name": "สำนักงานเทศบาลนครนนทบุรี", "Class": 2, "District": "เทศบาลนครนนทบุรี", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.513245565920954, 13.862165393274141 ], [ 100.513610515969148, 13.862109056115163 ], [ 100.513754595366095, 13.862080922728859 ], [ 100.513680202577291, 13.861474085784627 ], [ 100.513148359542257, 13.861525310082602 ], [ 100.513245565920954, 13.862165393274141 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 16, "Name": "สำนักงานเขตบางแค", "Class": 2, "District": "บางแค", "1-2": 6.08, "2-3": 9.08 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.409412373834897, 13.695959712705028 ], [ 100.410588104846497, 13.693142679618875 ], [ 100.408434029788012, 13.692130968497613 ], [ 100.408162951525725, 13.695391305130599 ], [ 100.409412373834897, 13.695959712705028 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 17, "Name": "สำนักงานเขตหนองแขม", "Class": 2, "District": "หนองแขม", "1-2": null, "2-3": 3.19 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.349120272844701, 13.705518375206037 ], [ 100.349454046277984, 13.705492546934346 ], [ 100.349445546960922, 13.70532176935613 ], [ 100.348933310386585, 13.705267458342153 ], [ 100.348897665093276, 13.705643878374344 ], [ 100.349100444969523, 13.705656208808785 ], [ 100.349120272844701, 13.705518375206037 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 18, "Name": "จุดจอดรถเขตหนองแขม", "Class": 1, "District": "หนองแขม", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.348833666141033, 13.705509452566275 ], [ 100.348806394189481, 13.704930900740166 ], [ 100.348775028149447, 13.70492746620052 ], [ 100.348730775722785, 13.704927707548082 ], [ 100.348717776198498, 13.704911553193719 ], [ 100.348722752353751, 13.7048141745504 ], [ 100.348492147660892, 13.704793798426588 ], [ 100.348477116072502, 13.705067906870864 ], [ 100.34848297670159, 13.70512556469842 ], [ 100.348459335681781, 13.705183383393379 ], [ 100.348413321612384, 13.705198056740535 ], [ 100.348308335066449, 13.705218460033345 ], [ 100.348287740869722, 13.705487190389441 ], [ 100.348833666141033, 13.705509452566275 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 19, "Name": "จุดจอดรถเขตบางแค", "Class": 1, "District": "บางแค", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.402157719944213, 13.740979750764968 ], [ 100.402430150697228, 13.740978160924705 ], [ 100.402436181645982, 13.740866902550204 ], [ 100.402448099719365, 13.740812245845511 ], [ 100.403378309992931, 13.740707130052584 ], [ 100.403237791949422, 13.738936523411935 ], [ 100.402121717732442, 13.738972765458382 ], [ 100.402095042287101, 13.740983712525058 ], [ 100.402157719944213, 13.740979750764968 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 20, "Name": "โรงกำจัดสิ่งปฏิกูลหนองแขม", "Class": 3, "District": "หนองแขม", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.360517195909239, 13.719011691506134 ], [ 100.360953373079099, 13.719080296196886 ], [ 100.361171537125898, 13.719127678058308 ], [ 100.361167401333404, 13.718410156818434 ], [ 100.361377812023676, 13.718438895223022 ], [ 100.361376658184682, 13.717575606441802 ], [ 100.361575600623965, 13.717604407928166 ], [ 100.361630805126381, 13.71723412010785 ], [ 100.361057844061293, 13.717118022764291 ], [ 100.360813736239322, 13.717145538062436 ], [ 100.360564328562376, 13.717239994661595 ], [ 100.36053800164261, 13.717314883817195 ], [ 100.360489385537662, 13.717502011989067 ], [ 100.360508474337678, 13.718824879066126 ], [ 100.360517195909239, 13.719011691506134 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 21, "Name": "โรงกำจัดสิ่งปฏิกูลแสนสุข", "Class": 3, "District": "แสนสุข", "1-2": 3.91, "2-3": 5.72 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.958085064151007, 13.262799357306362 ], [ 100.958847603913199, 13.262548338822091 ], [ 100.958719635880755, 13.262158208424383 ], [ 100.958752746877778, 13.262101446715201 ], [ 100.958828429156696, 13.262082526145472 ], [ 100.95892303200533, 13.262063605575742 ], [ 100.958804778444531, 13.261278401932033 ], [ 100.958695985168603, 13.261287862216902 ], [ 100.958625033032121, 13.261325703356356 ], [ 100.958596652177519, 13.261410845920134 ], [ 100.958596652177519, 13.261458147344451 ], [ 100.958492589044027, 13.261538559765794 ], [ 100.957796015253393, 13.261810867344684 ], [ 100.958085064151007, 13.262799357306362 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 22, "Name": "โรงกำจัดสิ่งปฏิกูลเทศบาลนครราชสีมา", "Class": 3, "District": "ปากช่อง", "1-2": 0.0, "2-3": 105.27 }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 102.150681443103878, 14.898734362023109 ], [ 102.143584565699868, 14.894711697647079 ], [ 102.142983586329478, 14.897994660572712 ], [ 102.149270833811855, 14.90176375151786 ], [ 102.150681443103878, 14.898734362023109 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 23, "Name": "สำนักงานเทศบาลเมืองปากช่อง", "Class": 2, "District": "ปากช่อง", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 101.397386494861351, 14.679929557370214 ], [ 101.397884933620105, 14.679666443197441 ], [ 101.397615315501483, 14.679131937102632 ], [ 101.397053019819907, 14.679404511560266 ], [ 101.397369939362846, 14.67994847793994 ], [ 101.397386494861351, 14.679929557370214 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 24, "Name": "จุดจอดรถปากช่อง", "Class": 1, "District": "ปากช่อง", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 101.396808826216841, 14.678995945507715 ], [ 101.396387252272604, 14.679227131219069 ], [ 101.397028777839907, 14.680200949292248 ], [ 101.397397728949613, 14.680044854591992 ], [ 101.396808826216841, 14.678995945507715 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 25, "Name": "สำนักงานเทศบาลเมืองแสนสุข", "Class": 2, "District": "แสนสุข", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.914159532923136, 13.28928607966637 ], [ 100.915283881246324, 13.287982753446849 ], [ 100.91420313010299, 13.287136050321848 ], [ 100.913097138487132, 13.288370538888927 ], [ 100.914159532923136, 13.28928607966637 ] ] ] ] } },
+{ "type": "Feature", "properties": { "id": 26, "Name": "จุดจอดรถแสนสุข", "Class": 1, "District": "แสนสุข", "1-2": null, "2-3": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 100.941468560319464, 13.298340449732981 ], [ 100.941602805673583, 13.299266332281798 ], [ 100.94189066547915, 13.299243983367214 ], [ 100.941975466924944, 13.297836182357148 ], [ 100.941468560319464, 13.298340449732981 ] ] ] ] } }
+]
+}

examples/data/locations.qmd

@@ -0,0 +1,44 @@
+<!DOCTYPE qgis PUBLIC 'http://mrcc.com/qgis.dtd' 'SYSTEM'>
+<qgis version="3.32.3-Lima">
+  <identifier></identifier>
+  <parentidentifier></parentidentifier>
+  <language></language>
+  <type>dataset</type>
+  <title></title>
+  <abstract></abstract>
+  <contact>
+    <name></name>
+    <organization></organization>
+    <position></position>
+    <voice></voice>
+    <fax></fax>
+    <email></email>
+    <role></role>
+  </contact>
+  <links/>
+  <dates/>
+  <fees></fees>
+  <encoding></encoding>
+  <crs>
+    <spatialrefsys nativeFormat="Wkt">
+      <wkt>PROJCRS["WGS 84 / UTM zone 47N",BASEGEOGCRS["WGS 84",ENSEMBLE["World Geodetic System 1984 ensemble",MEMBER["World Geodetic System 1984 (Transit)"],MEMBER["World Geodetic System 1984 (G730)"],MEMBER["World Geodetic System 1984 (G873)"],MEMBER["World Geodetic System 1984 (G1150)"],MEMBER["World Geodetic System 1984 (G1674)"],MEMBER["World Geodetic System 1984 (G1762)"],ELLIPSOID["WGS 84",6378137,298.257223563,LENGTHUNIT["metre",1]],ENSEMBLEACCURACY[2.0]],PRIMEM["Greenwich",0,ANGLEUNIT["degree",0.0174532925199433]],ID["EPSG",4326]],CONVERSION["UTM zone 47N",METHOD["Transverse Mercator",ID["EPSG",9807]],PARAMETER["Latitude of natural origin",0,ANGLEUNIT["degree",0.0174532925199433],ID["EPSG",8801]],PARAMETER["Longitude of natural origin",99,ANGLEUNIT["degree",0.0174532925199433],ID["EPSG",8802]],PARAMETER["Scale factor at natural origin",0.9996,SCALEUNIT["unity",1],ID["EPSG",8805]],PARAMETER["False easting",500000,LENGTHUNIT["metre",1],ID["EPSG",8806]],PARAMETER["False northing",0,LENGTHUNIT["metre",1],ID["EPSG",8807]]],CS[Cartesian,2],AXIS["(E)",east,ORDER[1],LENGTHUNIT["metre",1]],AXIS["(N)",north,ORDER[2],LENGTHUNIT["metre",1]],USAGE[SCOPE["Engineering survey, topographic mapping."],AREA["Between 96°E and 102°E, northern hemisphere between equator and 84°N, onshore and offshore. China. Indonesia. Laos. Malaysia - West Malaysia. Mongolia. Myanmar (Burma). Russian Federation. Thailand."],BBOX[0,96,84,102]],ID["EPSG",32647]]</wkt>
+      <proj4>+proj=utm +zone=47 +datum=WGS84 +units=m +no_defs</proj4>
+      <srsid>3131</srsid>
+      <srid>32647</srid>
+      <authid>EPSG:32647</authid>
+      <description>WGS 84 / UTM zone 47N</description>
+      <projectionacronym>utm</projectionacronym>
+      <ellipsoidacronym>EPSG:7030</ellipsoidacronym>
+      <geographicflag>false</geographicflag>
+    </spatialrefsys>
+  </crs>
+  <extent>
+    <spatial crs="EPSG:32647" maxy="0" dimensions="2" minz="0" minx="0" maxx="0" miny="0" maxz="0"/>
+    <temporal>
+      <period>
+        <start></start>
+        <end></end>
+      </period>
+    </temporal>
+  </extent>
+</qgis>

index.html

@@ -1,50 +1,90 @@
 <!DOCTYPE html>
 <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>
 
-<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>
-</head>
+    <script src="dist/control.trackplayback.js"></script>
+    <script src="dist/leaflet.trackplayback.js"></script>
 
-<body>
-  <a href="https://github.com/linghuam/Leaflet.TrackPlayBack"><img style="position: absolute; top: 0; left: 0; border: 0;z-index: 999;"
-      src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png" alt="Fork me on GitHub"></a>
-  <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.5270], 12);
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-    }).addTo(map);
+    <script src="examples/data/locations.js"></script>
+  </head>
 
-    // get data from server
-    const xhr = new XMLHttpRequest();
-    xhr.open('GET', 'examples/data/test_gps_non (7).json', true);
-    xhr.onreadystatechange = xhrCallback;
-    xhr.send();
+  <body>
 
-    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-3.png'
+    <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:
+          '&copy; <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" };
           }
-        });
-        const trackplaybackControl = L.trackplaybackcontrol(trackplayback);
-        trackplaybackControl.addTo(map);
-      }
-    }
+        },
+      }).bindPopup(
+          function (layer) {
+            return layer.feature.properties.Name; //merely sets the tooltip text
+          },
+          { permanent: true, opacity: 0.5 } //then add your options
+        )
+        .addTo(map);
 
-  </script>
-</body>
+      // 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: 28,
+              height: 28,
+            },
+            trackLineOptions: {
+              isDraw: true,
+            },
+            trackPointOptions: {
+              isDraw: true,
+            },
+          });
+          const trackplaybackControl = L.trackplaybackcontrol(trackplayback);
+          trackplaybackControl.addTo(map);
+        }
+      }
+    </script>
+  </body>
 </html>