loren779/maptalks.odline

A maptalks layer to draw OD(Origin-Destination) lines.

maptalks.odline

A maptalks Layer to draw OD(Origin-Destination) lines.

Examples

• Animated lines of migration in China. (inspired by echarts)
• Curves of migration.

Install

• Install with npm: npm install maptalks.odline.
• Download from dist directory.
• Use unpkg CDN: https://unpkg.com/maptalks.odline/dist/maptalks.odline.min.js

Usage

As a plugin, maptalks.odline must be loaded after maptalks.js in browsers.

<link rel="stylesheet" href="https://unpkg.com/maptalks/dist/maptalks.css">
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/maptalks.odline/dist/maptalks.odline.min.js"></script>
<script>
var odlayer = new maptalks.ODLineLayer('od', data)
    .addTo(map);
</script>

Supported Browsers

IE 9-11, Chrome, Firefox, other modern and mobile browsers.

API Reference

ODLineLayer is a subclass of maptalks.ParticleLayer and inherits all the methods of its parent.

Constructor

// data's format
// [{ coordinates : [[x, y], [x, y]], symbol : {..} }, { coordinates : [[x, y], [x, y]], symbol : {..} } ..]
// symbol only supports lineWidth and lineColor
new maptalks.ODLineLayer(id, data, options)

• id String layer id
• data Object[] origin-destination data, [{ coordinates : [[x, y], [x, y]], symbol : {..} }, { coordinates : [[x, y], [x, y]], symbol : {..} } ..]
• options Object options
  • animation Boolean is animation? true or false (true by default)
  • random Boolean whether the animation starts randomly, true or false (false by default)
  • animationDuration Number duration of a animation cycle in ms (6000 by default)
  • animationOnce Boolean does animation only run once? (false by default)
  • curveness Number curveness of the od-line, from 0(straight) to 1 (0.2 by default)
  • trail Number trail length of the particle when animating (20 by default)
  • globalCompositeOperation String globalCompositeOperation of the canvas when drawing particles
  • symbol Object default symbol of OD-line, only supports lineWidth and lineColor ({ lineWidth : 2, lineColor : #000 } by default)
  • Other options defined in maptalks.ParticleLayer

getData()

get layer's data

Returns Object[]

setData(data)

set new data to the layer

• data Object[] origin-destination data

Returns this

toJSON()

export the ODLineLayer's JSON.

var json = odlayer.toJSON();

Returns Object

Contributing

We welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.

Develop

The only source file is index.js.

It is written in ES6, transpiled by babel and tested with mocha and expect.js.

Scripts

• Install dependencies

$ npm install

• Watch source changes and generate runnable bundle repeatedly

$ npm run dev

• Tests

$ npm test

• Watch source changes and run tests repeatedly

$ npm run tdd

• Package and generate minified bundles to dist directory

$ npm run build

• Lint

$ npm run lint