Skip to content

基于leaflet的船舶轨迹回放插件,支持多艘船的轨迹回放,可播放、暂停、快进、快退。

Notifications You must be signed in to change notification settings

dodolooking/TrackPlayback

 
 

Repository files navigation

Leaflet-TrackPlayback

Introduce

基于leaflet+canvas+webpack实现的海上船舶轨迹回放插件,支持轨迹的播放、暂停、快进、快退操作以及上万个轨迹点的显示和上千条轨迹的回放。

效果图1

效果图2

Example

查看Demo

// 调用代码
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)
})

Usage

# install dependencies
npm install

# 生成 dist/LeafletPlayback.js文件
npm run dev

# 生成 dist/LeafletPlayback.min.js文件
npm run build

具体使用方法参照index.html页面

Custome your Data

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:[]}, ....]
  }...
]

Problem

如果您有好的建议或意见,欢迎提问

Recommend

License

MIT license

About

基于leaflet的船舶轨迹回放插件,支持多艘船的轨迹回放,可播放、暂停、快进、快退。

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 71.2%
  • CSS 25.9%
  • HTML 2.9%