A maptalks plugin to support plot symbols, e.g. DoubleArrow, ClosedCurve, Sector, DiagonalArrow, StraightArrow, etc.
All support geometries are listed below:
- DoubleArrow
- ClosedCurve
- Sector
- StraightArrow
- DiagonalArrow
- DoveTailDiagonalArrow
- A demo of maptlaks.plotsymbol.
- A demo of AnimateShow.
- Install with npm:
npm install maptalks.plotsymbol
. - Download from dist directory.
- Use unpkg CDN:
https://unpkg.com/maptalks.plotsymbol/dist/maptalks.plotsymbol.min.js
As a plugin, maptalks.plotsymbol
must be loaded after maptalks.js
in browsers.
<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/maptalks.plotsymbol/dist/maptalks.plotsymbol.min.js"></script>
<script>
var drawTool = new maptalks.DrawTool({
mode: 'DoubleArrow'
symbol : {
'lineColor' : '#e84',
'polygonFill' : '#f00',
'polygonOpacity' : 0.5,
}
}).addTo(map).disable();
drawTool.on('drawend', function (param) {
//Add geometry to a VectorLayer
});
</script>
//You just need to import it, and then you can draw geometries by a drawtool.
import plotsymbol from 'maptalks.plotsymbol';
const drawTool = new maptalks.DrawTool({
mode: 'Point',
symbol : {
'lineColor' : '#e84',
'polygonFill' : '#f00',
'polygonOpacity' : 0.5,
}
}).addTo(map).disable();
//You can set many modes like DoubleArrow, ClosedCurve, Sector, DiagonalArrow, StraightArrow and so on.
drawTool.setMode('DoubleArrow');
drawTool.on('drawend', function (param) {
//Add geometry to a VectorLayer
});
IE 9-11, Chrome, Firefox, other modern and mobile browsers.
We welcome any kind of contributions including issue reportings, pull requests, documentation corrections, feature requests and any other helps.
The index.js
export all support geometries, like DoubleArrow, ClosedCurve, DiagonalArrow, etc.
It is written in ES6, transpiled by babel and tested with mocha and expect.js.
- Install dependencies
$ npm install
- Watch source changes and generate runnable bundle repeatedly
$ gulp watch
- Tests
$ npm test
- Watch source changes and run tests repeatedly
$ gulp tdd
- Package and generate minified bundles to dist directory
$ gulp minify
- Lint
$ npm run lint