maptalks.snap

maptalks snap plugin
maptalks.js version required >= 1.0.0-rc.11

Features

• Support Geometry Edit/Draw
• Impressive performance perf test

Install

• NPM

  npm i maptalks
  # or
  # npm i maptalks-gl
  npm i maptalks.snap

• CDN

<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script src="https://unpkg.com/maptalks.snap/dist/maptalks.snap.js"></script>

Examples

edit Geometry
draw Geometry
custom filtergeometries
filtergeometries from multi layers
filtergeometries from VT Layer
perf test
drag point

## API

Snap

constructor(map, options)

• map
• options

  • {Number} tolerance snapTo threshold

  • {Function } filterGeometries filter geometries for snap collision. If it is empty, all geometries on the layer where the geometry is located will be obtained

import {
    Snap
} from 'maptalks.snap';
const snap = new Snap(map, {
    //snapTo threshold
    tolerance: 15,
    // filter geometries for snap collision
    filterGeometries: function() {
        //you can return geometries for snap collision
        return layer.geometries().filter(geo => {
            return geo instanceof maptalks.Polygon;
        })
    }
});

snap.on('snap', (e) => {
    console.log(e);
})

//if you use cdn,Snap Hanging under maptalks namespace
// const snap = new maptalks.Snap(map, {
//     //snapTo threshold
//     tolerance: 15,
//     // filter geometries for snap collision
//     filterGeometries: function() {
//         //you can return geometries for snap collision
//         return layer.geometries().filter(geo => {
//             return geo instanceof maptalks.Polygon;
//         })
//     }
// });
snap.effectGeometry(polygon);
//update options
snap.config({
    tolerance: 18,
    //other opiton params
    ...
})

methods

• effectGeometry(geometry) ` effect geometry for snap`

snap.effectGeometry(polygon);
snap.effectGeometry(lineString);

• unEffectGeometry(geometry) remove geometry snap behavior

snap.unEffectGeometry(polygon);
snap.unEffectGeometry(lineString);

• dispose() dispose Snap

snap.dispose();

events

• snap

     snap.on('snap', (e) => {
         console.log(e);
     })

This site is open source. Improve this page.