Maptalks.snapto NPM

maptalks.snapto

A plugin used for mouse point to adsorb geometries, inspired by snap interaction.

Examples

See the demo.

Install

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

Usage

As a plugin, maptalks.snapto must be loaded after maptalks.js in browsers. You can also use 'import { SnapTool } from "maptalks.snapto" when develope with webpack.

<script type="text/javascript" src="https://unpkg.com/maptalks/dist/maptalks.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/maptalks.snapto/dist/maptalks.snapto.min.js"></script>
<script>
   const snap = new maptalks.SnapTool({
                tolerance: 20,
                mode : 'point'
            });
   snap.addTo(map);//when addto map, it will call enable method default.
   //recommend set options 'geometryEvents' to false if vectorlayer contains a large amount of geometries
   const layer = new maptalks.VectorLayer('vectorlayer',geometries,{ geometryEvents:false });
   snap.setLayer(layer);
   //If you draw geometries on map with a drawing tool, you should bind the maptalks.DrawTool object to the snapto tool.
   const drawtool = new maptalks.DrawTool();
   snap.bindDrawTool(drawtool);
</script>

Supported Browsers

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

API Reference

`Constructor`

new maptalks.SnapTool(options)

options Object options
- mode String there are two modes, line and point, line by default.
- tolerance Number the distance in pixel from mouse to the snap point, 10 by default.
- symbol Object symbol of the mouse point.

setLayer(layer||maptalks.VectorLayer) specify a vectorlayer which has geometries to snap to.

setGeometries(geometries||Array<maptalks.Geometry>) specify a geometry collection to snap to.

bindDrawTool(drawtool||maptalks.DrawTool) When interacting with a drawtool, you should bind the drawtool object to this snapto tool

enable() start snap to.

disable() end snap to.

setMode(mode||String) set the snapping strategy, when mode is 'point', it will snap to geometries's end points. When it set to 'line',it will snap a point which is nearest to mouse on a LineString or Polygon.