Leaflet.freedraw 插件画多边形

官方标配写法:

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 就是最新的这个多边形坐标复制代码

画笔的功能 和 一些默认值

Option Default Result
mode ALL Modifies the default mode.
smoothFactor 0.3 By how much to smooth the polygons.
elbowDistance 10 Factor to determine when to delete or when to append an edge.
simplifyFactor 1.1 By how much to simplify the polygon.
mergePolygons true Whether to attempt merging of polygons that intersect.
concavePolygon true Whether to apply the concaving algorithm to the polygons.
maximumPolygons Infinity Maximum number of polygons to be added to the map layer.
recreateAfterEdit false Whether to recreate the polygons subsequent to them being modified.
notifyAfterEditExit false Whether to defer markers event until after exiting EDIT mode.
leaveModeAfterCreate false Whether to exit CREATE mode after each polygon creation.
strokeWidth 2 Size 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);复制代码

各种方法函数 :

Method Yields Result
create Array Creates a polygon by passing an array of LatLngs
remove void Removes a polygon that is yielded from create
clear void Clears all polygons from the current instance
mode Number Sets and retrieves the current mode.
cancel void Cancels the current create action – such as on escape.
size Number Yields the number of polygons on the map layer.
all Array Enumerate all of the current polygons for the current layer

备注:

单击多边形 可以 删掉

转载自:https://blog.csdn.net/weixin_34294649/article/details/88204492

You may also like...