Skip to content

maptalks/maptalks.snap

Repository files navigation

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.snap
#   or
  yarn add maptalks.snap
  • CDN
<script src="https://unpkg.com/maptalks.snap/dist/maptalks.snap.js"></script>

Examples

edit
draw
custom filtergeometries
filtergeometries from multi layers
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);
     })