Leaflet-Geoman 使用文档
安装
迁移 Leaflet.PM
npm uninstall leaflet.pm
npm i @geoman-io/leaflet-geoman-free- 1
- 2
通过npm安装
npm i @geoman-io/leaflet-geoman-free- 1
手动安装
下载leaflet-geoman.css 和leaflet-geoman.min.js ，然后把它们包含在工程中。
通过CDN安装
CSS
<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />JS
<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>作为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’ | 工具条位置，可能值有 |
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');- 1
样式
为了改变绘制过程中线的符号，你可以输入以下选项到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,
});
