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="https://github.com/weijun-lab/Leaflet.TrackPlayer/raw/master/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.

• turf A modular geospatial engine written in JavaScript
• Leaflet.PolylineDecorator Defines and draws patterns along existing polylines or coordinate paths
• Leaflet.RotatedMarker Provides rotation functionality for markers in Leaflet