Leaflet.TrackPlayBack
Introduce
It's a track playback plugin based on leaflet and HTML5 canvas.
To use it,you need provide some GPS data and time data, then you can play the track on the map.
Support track playback, pause, fast forward, fast reverse operation.
Requirements
- leaflet version: >1.0.0
Demo
Usage
Using npm:
npm i leafletnpm i leaflet-plugin-trackplayback
const trackplayback = L;// orconst trackplayback = data map;
Using script tag:
<!--Optional (only if you need plaback control)--> <!--Optional (only if you need plaback control)-->
example:
const trackplayback = L; // Optional (only if you need plaback control) const trackplaybackControl = L; trackplaybackControl;
API reference
initialize(data, map, options)
data
can be:
when you want to play back one track
lat:30 lng:116 time:1502529980 dir:320 info:key: 'name' value: 'ship1' ...
or
when you want to play back more tracks
lat:30 lng:116 time:1502529980 dir:320 info: ... lat:30 lng:116 time:1502529980 dir:320 info: ...
the trackpoint obj properties:
- lat: Latitude of target
- lng: Longitude of target
- time: unix timestamp
- dir(Optional): Moving direction(0-360 degrees, Clockwise direction), if you don't provide it, the program can auto caculate the target direction
- info(Optional): other static information of the target, it's an array of key-value pairs
map
is the L.map instance.
options
can be:
const Options = // the play options clockOptions: // the default speed // caculate method: fpstime * Math.pow(2, speed - 1) // fpstime is the two frame time difference speed: 13 // the max speed maxSpeed: 65 // trackPoint options trackPointOptions: // whether draw track point isDraw: false // whether use canvas to draw it, if false, use leaflet api `L.circleMarker` useCanvas: true stroke: false color: '#ef0300' fill: true fillColor: '#ef0300' opacity: 03 radius: 4 // trackLine options trackLineOptions: // whether draw track line isDraw: false stroke: true color: '#1C54E2' weight: 2 fill: false fillColor: '#000' opacity: 03 // target options targetOptions: // whether use image to display target, if false, the program provide a default useImg: false // if useImg is true, provide the imgUrl imgUrl: '../../static/images/ship.png' // the width of target, unit: px width: 8 // the height of target, unit: px height: 18 // the stroke color of target, effective when useImg set false color: '#00f' // the fill color of target, effective when useImg set false fillColor: '#9FD12D'
events
// trigger on time changetrackplayback
methods
start()
start play, return this
stop()
stop play, return this
rePlaying()
replay, return this
slowSpeed()
slow play speed, return this
quickSpeed()
quick play speed, return this
getSpeed()
get play speed, return speed value
getCurTime()
get current time, return unix timestamp
getStartTime()
get start time, return unix timestamp
getEndTime()
get end time, return unix timestamp
isPlaying()
whether in playing, return true or false
setCursor(time)
set current playing time, need a unix timestamp param, return this
setSpeed(speed)
set the playback speed, return this
showTrackPoint()
draw track point, return this
hideTrackPoint()
remove track point, return this
showTrackLine()
draw track line, return this
hideTrackLine()
remove track line, return this
dispose()
destory the trackplayback instance, when call this, the trackplayback instance can't be used again and the program will clear track layer.
Issues
If you have good suggestions or comments,welcome to ask questions.