/Leaflet.TrackPlayer

A Leaflet track playback plugin, enabling you to swiftly create stunning track replay functionality./ 一个leaflet轨迹回放插件，帮助你快速构建出精美的轨迹回放功能。

Primary LanguageJavaScriptMIT LicenseMIT

Leafelt.TrackPlayer

language: English / 简体中文

A Leaflet track playback plugin, enabling you to swiftly create stunning track replay functionality.
一个leaflet轨迹回放插件，帮助你快速构建出精美的轨迹回放功能。

🎨Live Demo

https://weijun-lab.github.io/Leaflet.TrackPlayer/

Installation

  • npm install leaflet-trackplayer
  • Or download the repository

Usage

ESM(ECMAScript Modules)

import  "leaflet-trackplayer";

UMD(Universal Module Definition)

<script src="Leaflet.TrackPlayer/dist/leaflet-trackplayer.umd.cjs"></script>
let track = new L.TrackPlayer(latlngs, options).addTo(map)

Code Example

let latlngs = [
       [
           34.291120985630914,
           108.91770583134237
       ],
       [
           34.29428596006031,
           108.9177058265846
       ],
];
let track = new L.TrackPlayer(latlngs, {
        markerIcon: L.icon({
          iconUrl: "Your image url",
        }),
        markerRotation: false,
}).addTo(map);
track.start();
track.on("progress",(progress, { lng, lat },index)=>{{
    console.log(`progress:${progress} - position:${lng},${lat} - trackIndex:${index}`)
})

Documentation

Latlngs

An array of latitude and longitude data for the trajectory, which is the same as the first parameter for L.polyline.

Options

Options Type Default Description
speed Number 600 Travel speed (km/h)
weight Number 8 Width of the trajectory line
markerIcon L.icon - The icon of the moving marker during playback has a value equivalent to the 'icon' property of the L.marker.
polylineDecoratorOptions Object {...} Arrowhead styles for the trajectory line, seeLeaflet.PolylineDecorator
passedLineColor String #0000ff Color of the traveled portion of the trajectory line
notPassedLineColor String #ff0000 Color of the untraveled portion of the trajectory line
panTo Boolean true Whether the map view follows the moving marke
markerRotation Boolean true Whether the marker auto-rotates according to the direction of movement
markerRotationOrigin String center The rotation origin of the marker, follows the CSS transform-origin rule
markerRotationOffset Number 0 The angle offset for marker rotation

Methods

Methods Return Description
start() - Start playback
pause() - Pause playback
setSpeed(<Number> speed,<Number> debounceTimeout?) - Set the playback speed (km/h)
setProgress(<Number> progress) - Set the playback progress value to 0-1
addTo(<Map> map) this Adds the track player to the map
remove() - Removes the track player from the map
on(<String> type,<Function> fn) - Adds a listener function to the specified event type
off(<String> type,<Function> fn？) - Removes the passed-in listener function. If no function is specified, removes all listeners for the event type.

Event

Event Description
start Triggered when playback starts
pause Triggered when playback is paused
finished Triggered when playback completes
progress Triggered during playback; receives the progress(0-1) and current location and track array index in the callback function

Properties

Properties Type Description
marker L.marker Moving marker on the trajectory
passedLine L.polyline The traveled part of the trajectory line
notPassedLine L.polyline The untraveled part of the trajectory line
polylineDecorator L.polylineDecorator The arrowhead-decorated polyline
options Object Configuration options

🎉Acknowledgements & References

I gratitude to the following open-source plugins, which have provided essential support for the functionality.