Leaflet-Geoman 帮助文档

Leaflet-Geoman 使用文档

安装

迁移 Leaflet.PM

npm uninstall leaflet.pm
npm i @geoman-io/leaflet-geoman-free

通过npm安装

npm i @geoman-io/leaflet-geoman-free

手动安装

下载leaflet-geoman.css 和leaflet-geoman.min.js ，然后把它们包含在工程中。

通过CDN安装

CSS

JS

作为ES6模块

import '@geoman-io/leaflet-geoman-free';
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';

快速开始

初始化 leaflet-geoman

在引入leaflet之后，仅引入leaflet-geoman.min.js.它会自己初始化。如果你需要leaflet-geoman忽略一些确定的图层，在创建的时候，通过 pmIgnore:true 选型控制忽略的图层。示例：

L.marker([51.50915,-0.096112],{pmIgnore:true}).addTo(map);

选择加入

如果你想使用leaflet作为一个可选项，在导入leaflet之后立即调用以下函数：

L.PM.initialize([optIn:true]);

此时所有的他得都会被leaflet-geoman忽略，除非你特别声明pmIgnore:false到一个图层。

L.marker([51.50915,-0.096112],{pmIgnore:false}).addTo(map);

leaflet-geoman 工具条

你可以通过一个接口把工具条添加到地图。

map.pm.addControls({
    position:'topleft',
    drawCircle:false,
});

下表提供了可选选项.

选项	默认值	描述
position	‘topleft’	工具条位置，可能值有'topleft','topright', 'bottomleft', 'bottomright'draw
drawMarker	true	添加一个绘制marker点按钮
drawCircleMarker	true	添加一个绘制圆型marker点按钮
drawPolyline	true	添加一个绘制线段按钮
drawRectangle	true	添加一个绘制矩形按钮
drawPolygon	true	添加一个绘制多边形按钮
drawCircle	true	添加一个绘制圆按钮
editMode	true	添加一个切换编辑模式（所有图层）
dragMode	true	添加一个切换移动模式（所有图层）
cutPolygon	true	添加一个切割图形按钮
removalMode	true	添加一个移除图层按钮
pinningOption	true	添加一个切换钉点选项按钮
snapingOption	true	添加一个切换捕捉选项按钮

如果你想知道示例是怎样的，drawPolygon 按钮将会可用通过定义选项。

示例：

//make markers not snapable during marker draw
map.pm.setGlobalOptions({snapable:false});

所有选项都可以在绘制模式中指定。

绘制模式

在地图上使用绘制模式如下：

//enable polygon drawing mode
map.pm.enableDraw('Polygon',{
	snappable:true,
	sanpDistance:20,
})

//disable drawing mode
map.pm.disableDraw('Polygon');

当前可用图形包括：点（Marker),圆（Circle),线（Line),矩形（Rectangle),多边形(Polygon)h和切割(Cut)。

你可以通过下面代码获取任何图形：

map.pm.Draw.getShapes();

以下是可选选项列表：

选项	默认值	描述
snappable	true	精确绘制时可捕捉其他图层节点。按住ALT 键可以关闭捕捉功能。
snapDistance	20	捕获到其他节点的距离。
snapMiddle	false	允许捕捉图形两个节点中间部分。
tooltips	true	为用户显示有用的提按钮提示。
allowSelfIntersection	true	允许图形自相交。
templineStyle	{color:‘red’}	leaflet环图层选项，两个节点之间。
hintlineStyle	{color:‘red’,dashArray:[5,5]}	leaflet环图层选项，最后一个节点到当前鼠标点之间线段。
cursorMaker	true	当前鼠标位置显示成一个marker点。
finishOn	null	leaflet 结束绘制图形的图层事件，像’dblClick‘。Here’s a list.
markerStyle	{draggable:true}	leaflet Marker点选项，只在绘制Marker点时有效。

在绘制过程中，你可以监听地图事件。

map.on('pm:drawstart',e=>{
	console.log(e);
});

以下是可以监听的地图事件列表：

事件	参数	描述
pm:drawstart	e	当绘制模式启用的时候调用。参数包含图形类型和工作图层。
pm:drawend	e	当绘制模式关闭的时候调用，参数包含图形类型。
pm:create	e	当一个图形被绘制完毕后调用，参数包含图形类型和工作图层。

还有一些事件可以在图层绘制中监听，注册一个事件参考：

// listen to vertexes being added to currently drawn layer(called workingLayer)
map.on('pm:drawstart',({workingLayer})=>{
	workingLayer.on('pm:vertexadded',e={
		console.log(e);
	});
});

这里有可以监听的图层事件列表：

事件	参数	描述
pm:vertexadded	e	当一个节点被添加的时候调用，参数包含新的节点，它的marker，索引，工作图层和图形类型。
pm:snapdrag	e	在移动一个点中调用，参数包含影响图层和捕捉计算。
pm:snap	e	当一个节点被捕捉后调用，参数同上。
pm:unsnap	e	当一个节点失去捕捉后调用，参数同上。
pm:centerplaced	e	当图形的中心点被替换或移动后调用。

为了有选择性捕捉图层，你可以添加"snapIgnore"选项到你的图层，去关闭在绘制工程中的捕捉。

//This layer will be ignored by the sanpping engine during drawing
L.geoJSON(data,{
	snapIngore:true
});

编辑模式

使用以下代码去编辑图层的节点。

//enable edit mode
layer.pm.enable({
	allowSelfIntersection:false,
})

查询可选选项列表：

选项	默认值	描述
snappable	true	精确绘制时开启捕捉其他图层节点，按住ALT建可关闭捕捉。
snapDistance	20	捕捉距离。
pinning	false	在编辑模式下，切换用钉点标识节点或marker点。
allowSelfIntersection	true	允许多变线或线段可以自相交。
preventMarkerRemoval	false	阻止通过鼠标右键移除marker点或节点。
limitMarkersToCount	-1	显示靠近当前鼠标点n个marker点。-1表示没有限制。
limitMarkersToZoom	-1	在给定的显示级别下显示marker点。
limitMarkerToViewport	false	在视图内只显示marker点。
limitMarkerToClick	false	图层被点击后才显示marker点。

在layer.pm 下图层的可用方法：

方法	返回值	描述
eable(options)	-	开启编辑模式。通过的选项将会保存，即使编辑模式是通过工具条启动。
disable（）	-	关闭编辑模式。
toggleEdit(options)	-	切换编辑模式。通过选项保存。
enabled	Boolean	返回true,当处编辑模式开启状态。
hasSelfIntersection	Boolean	返回true,当图层中有自相交。

你可以监听编辑相关事件参考下面代码：

//layer.on('pm:edit',e=>{
	console.log(e);
})

图层示例的可用事件：

事件	参数	描述
pm:edit	e	当图层被编辑的时候触发。
pm:update	e	当图层被编辑且坐标发生了变化触发。
pm:disable	e	当图层的编辑模式关闭的时候触发。
pm:vertexadded	e	当添加了节点后触发
pm:vetexremoved	e	当移除了节点后触发
pm:markerdragstart	e	当marker点开始移动时触发
pm:markerdragend	e	当marker点结束移动时触发
pm:snap	e	当一个节点被其他节点捕捉的时候触发
pm:unsnap	e	当一个节点未被其他节点捕捉的时候触发
pm:intersect	e	当allowSelfIntersection:false,当检测到自相交的时候立即触发。
pm:centerplaced	e	当图形的中心点移动的时候触发。

你也可以在地图实例上监听指定的编辑模式事件:

map.on('pm:globaleditmodetoggled',e=>{
	console.log(e);
})

这个事件是一个启动布尔值和地图映射的对象。

拖拽模式

//toggle drag mode like this:
map.pm.toggleGlobalDragMode();

以下是map.pm的可以方法：

方法	返回	描述
toggleGloablDragMode()	-	Toggles global drag mode.
globalDragModeEnabled()	Boolean	如果拖拽模式开启，则返回true。拖拽模式关闭，则返回false.

以下是图层实例可用的事件

事件	参数	描述
pm:dragstart	e	当图层开始拖拽的时候触发。
pm:drag	e	当图层已经拖拽完毕后触发。
pm:dragend	e	当图层停止正在拖拽的时候触发。

你也可以在地图实例上监听指定的拖拽模式事件。

map.on('pm:globaldragmodetoggled',e=>{
	console.log(e);
})

这个事件有启动的布尔对象及地图映射对象。

​

移除模式

//toggle drag mode like this:
map.pm.toggleGlobalRemovalMode();

以下是map.pm可用方法列表：

方法	返回值	描述
toggleGlobalRemovalMode()	-	切换全局移除模式。
globalRemovalEnabled()	Boolean	如果全局移除模式开启，则返回true,移除模式关闭，返回false。

以下事件也可以在地图实例上监听：

事件	参数	描述
pm:remove	e	当图层通过移除模式被移除的时候触发。
layer:remove	e	标准Leaflet事件，当任何图层被移除的时候触发。

你可以像这样去监听指定的移除模式事件作用在地图实例上。

map.on('pm:globalremovalmodetoggled',e=>{
	console.log(e);
})

这个事件有启动的布尔对象及地图映射对象。

剪切模式

开启剪切图形功能，会从所有的叠加图形中减去绘制的多边形。这中方法可以创建含洞图形，分割图形或移除部分图形。

注意：被剪切的图形将会被替换，不是更新。监听pm:cut事件会更新你代码中引用的图层。pm:cut事件会提供原始图形和返回结果图层（被添加到图层的多边形或多面）。

//enable cutting mode
map.pm.Draw.Cut.enable({
	allowSelfIntersection:false,
})

可使用选项和绘制模式一样。

你可以使用下面方法在map.pm.Draw.Cut去处理剪切模式。

方法	返回	描述
enable(options)	-	开启剪切模式
disable()	-	关闭剪切模式
toggle(options)	-	切换剪切模式

下面是图层实例上的可用事件。

事件	参数	描述
pm:cut	e	当图层被切割的时候触发。

下面是地图实例上可用的事件。

事件	参数	描述
pm:cut	e	当图层被切割的时候触发。

选项

当在绘制和编辑图层的时候你有一些选项可用。你可以在每个图层上设置这些选（如上所述），或者你可以设置为全局所有图层都有效。当你使用工具条的时候不能通过代码来改变这些选项，这时使用全局设置选项就显得非常有用。

示例：

layer.pm.enable({pinning:true,snapable:false})
map.pm.setGlobalOptions({pinning:true,limitMarkersToCount:15})

以下是全局编辑模式可使用选项

选项	默认值	描述
snapable	true	开启捕捉
snapDistance	20	捕捉距离
pinning	false	标记节点
allowSelfIntersection	true	允许自相交
preventMarkerRemoval	false	关闭移除节点功能
limitMarkersToCount	-1	鼠标周边显示marker点数
limitMarkersCountGlobally	false	激活limitMarkersToCount
limitMarkersToZoom	-1	设置在某个比例尺下显示marker点
limitMarkersToViewport	false	只在视图内显示marker点
limitMarkersToClick	false	图层被点击的时候只显示marker点

捕捉

钉点

通用

语言

改变面向用户leaflet-geoman的语言

map.pm.setLang('zh');

样式

为了改变绘制过程中线的符号，你可以输入以下选项到enableDraw（）方法中。

//optional options for line style during draw. These are the defaults
var options={
	//the lines betwwen coordinates/markers
	templineStyle:{
		color:'red',
	},
	//the line form the last marker to the mouse cursor
	hintlineStyle:{
		color:'red',
		dashArray:[5,5],
	},
};

//enable drawing mode for shapes -eg Poly Line Circle 
map.pm.enableDraw('Polygon',options);

定制leaflet 绘制图层样式：

//optional options for line style
var options={
	templineStyle:{},
	hintlineStyle:{},
	pathOptions:{
		//add leaflet options for polylines/Polygons
		color:'red',
		fillcolor:'green',
	},
};

//enable drawing mode for shape 
map.pm.enableDraw('Polygon',options);

或可以像通常一样设置

map.pm.setPathOptons({
	color:'orange',
	fillColor:'green',
	fillOpacity:0.4,
});

原文地址