qjw2bqn/maptalks.plotsymbol

A maptalks plugin to support plot symbols, e.g. DiagonalArrow, StraightArrow, etc.

maptalks.plotsymbol

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

Examples

• A demo of maptlaks.plotsymbol.
• A demo of AnimateShow.

Install

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

Usage

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

Vanilla Javascript

<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>

ES6

    //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
    });

Supported Browsers

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

Contributing

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

Develop

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.

Scripts

• 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