Leaflet.freedraw 插件画多边形

2,148 阅读1分钟

官方标配写法:

import L from 'leaflet';
import FreeDraw from 'leaflet-freedraw';

const map = new L.Map(node);
const freeDraw = new FreeDraw();

map.addLayer(freeDraw);

绘画操作函数:

freeDraw.on('markers', event => {
    console.log(event.latLngs);    //   返回所有多边形坐标
});

那么返回最新画的多边形坐标,咋整?

var latestPolygon = eventData.latLngs.filter(function (latLngs) {
          const json = JSON.stringify(latLngs)
          const has = !~seenPolygons.indexOf(json)
          has && seenPolygons.push(json)
          return has
        })        //   latestPolygon 就是最新的这个多边形坐标

画笔的功能 和 一些默认值

OptionDefaultResult
modeALLModifies the default mode.
smoothFactor0.3By how much to smooth the polygons.
elbowDistance10Factor to determine when to delete or when to append an edge.
simplifyFactor1.1By how much to simplify the polygon.
mergePolygonstrueWhether to attempt merging of polygons that intersect.
concavePolygontrueWhether to apply the concaving algorithm to the polygons.
maximumPolygonsInfinityMaximum number of polygons to be added to the map layer.
recreateAfterEditfalseWhether to recreate the polygons subsequent to them being modified.
notifyAfterEditExitfalseWhether to defer markers event until after exiting EDIT mode.
leaveModeAfterCreatefalseWhether to exit CREATE mode after each polygon creation.
strokeWidth2Size of the stroke when drawing.

指定画笔有哪些功能,咋整?

// Allow create, edit and delete.
freeDraw.mode(CREATE | EDIT | DELETE);

// Allow everything except create.
freeDraw.mode(ALL ^ CREATE);

// Allow nothing.
freeDraw.mode(NONE);

各种方法函数 :

MethodYieldsResult
createArrayCreates a polygon by passing an array of LatLngs
removevoidRemoves a polygon that is yielded from create
clearvoidClears all polygons from the current instance
modeNumberSets and retrieves the current mode.
cancelvoidCancels the current create action – such as on escape.
sizeNumberYields the number of polygons on the map layer.
allArrayEnumerate all of the current polygons for the current layer


备注:

单击多边形 可以 删掉