基于leaflet+canvas+webpack实现的海上船舶轨迹回放插件，动画采用requestAnimationFrame，支持轨迹的播放、暂停、快进、快退操作以及上万个轨迹点的显示和上千条轨迹的回放。
// 调用代码
var map = L.map('leaflet-map').setView([34, 133], 8)
L.tileLayer.GoogleLayer().addTo(map)
$.getJSON('src/assets/data/3.json', function (Data) {
L.control.playback({
data: Data
}).addTo(map)
})# install dependencies
npm install
# 生成 dist/LeafletPlayback.js文件
npm run dev
# 生成 dist/LeafletPlayback.min.js文件
npm run build
具体使用方法参照index.html页面
you can change the method '_dataTransform' in 'src/control.playback/control.playback.js'
to transform data to standard format like this.
// standard format data
[
{
timePosList: [{lat:30, lng:116, time:1502529980, dir:320, heading:300, info:[]}, ....]
},
{
timePosList: [{lat:30, lng:116, time:1502529980, dir:320, heading:300, info:[]}, ....]
},
{
timePosList: [{lat:30, lng:116, time:1502529980, dir:320, heading:300, info:[]}, ....]
}...
]
如果您有好的建议或意见,欢迎提问