maptalks-routeplayer

The route player plugin for maptalks.js. Inspired by maptalks.routeplayer and OL-RouteAnimate

Demos

Live demo

Install

Install with npm: npm install @chiporyu/maptalks.routeplayer
Use unpkg CDN:
- https://unpkg.com/@chiporyu/maptalks.routeplayer/dist/maptalks.routeplayer.min.js,
- https://unpkg.com/@chiporyu/maptalks.routeplayer/dist/maptalks.routeplayer.css

Usage

<head>
  <link rel="stylesheet" href="https://unpkg.com/@chiporyu/maptalks.routeplayer/dist/maptalks.routeplayer.css">
</head>
<body>
  <script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
  <script type="text/javascript" src="https://unpkg.com/@chiporyu/maptalks.routeplayer/dist/maptalks.routeplayer.min.js"></script>
  <script>
    var player = new maptalks.VectorRoutePlayer(routes, map, options);
    player.play()
  </script>
</body>

Create new player for yourself

It is easy to create a new RoutePlayer class. Only thing you need to do is extend maptalks.BaseRoutePlayer and necessary metheds:

createLayers: required, to create layers you need to draw frame data
drawRoutesFrame(routes, time): required, you need to implement drawer for yourself.

API Refrence

`Constrator`

new maptalks.VectorRoutePlayer(routes, map, options)

routes Object|Array route or route array
map Object map instance

options Object options

// options demo
{
  unitTime: 1, // Double, 1 for real time speed,
  showControl: true, // Boolean, show control fo player
  controlOptions: {
    position: 'bottom-left' // String or Object, display in buttom-center of screen if nothing set
  },
  lineSymbol: { // show a car image at the newest cooridinate and a route path behind the car
    lineWidth: 2,
    lineColor: 'steelblue',
    markerFile: './car.png',
    markerPlacement: 'vertex-last', //vertex, point, vertex-first, vertex-last, center
    markerVerticalAlignment: 'middle',
    markerWidth: 75,
    markerHeight: 50
  }
}

// route demo 
[{
  path: [[121.475031060928, 31.2611187865471, 301000],
    [121.47940842604, 31.263466566376, 541000],
    [121.481768769973, 31.2649338991092, 781000],
    [121.483871621841, 31.2638700851521, 901000]],
  lineSymbol: {
    // .etc  line lineSymbol option to overide global lineSymbol
  }
}]

Metheds

`play()`

`pause()`

`cancel()`

`finish()`

`getCurrentTime()`

`getStartTime()`

`getEndTime()`

`setTime(time)`

time Number Skip time to time

`setProgress(progress)`

progress Number 0-1 Number value

`setSpeed(speed)`

speed Number

Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
assets		assets
dist		dist
examples		examples
src		src
.babelrc		.babelrc
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
gulpfile.js		gulpfile.js
index.js		index.js
package.json		package.json
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

maptalks-routeplayer

Demos

Install

Usage

Create new player for yourself

API Refrence

`Constrator`

Metheds

`play()`

`pause()`

`cancel()`

`finish()`

`getCurrentTime()`

`getStartTime()`

`getEndTime()`

`setTime(time)`

`setProgress(progress)`

`setSpeed(speed)`

`remove()` remove player from map, clear every thing if necessary

About

Releases

Packages

Languages

License

chiporyu/maptalks.routeplayer

Folders and files

Latest commit

History

Repository files navigation

maptalks-routeplayer

Demos

Install

Usage

Create new player for yourself

API Refrence

Constrator

Metheds

play()

pause()

cancel()

finish()

getCurrentTime()

getStartTime()

getEndTime()

setTime(time)

setProgress(progress)

setSpeed(speed)

remove() remove player from map, clear every thing if necessary

About

Topics

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

`Constrator`

`play()`

`pause()`

`cancel()`

`finish()`

`getCurrentTime()`

`getStartTime()`

`getEndTime()`

`setTime(time)`

`setProgress(progress)`

`setSpeed(speed)`

`remove()` remove player from map, clear every thing if necessary

Packages