Leaflet-Geoman学习笔记

Leaflet-Geoman

Leaflet-Geoman有相关技术文档 Docs

• 官网地址：https://www.geoman.io/

1. Leaflet-Geoman安装

• 通过 npm 安装

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

• 通过 CDN 安装

<link rel="stylesheet" href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css" />
<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.min.js"></script>

• 通过ES6模块导入

import * as L from "leaflet";
import "leaflet/dist/leaflet.css";
import "@geoman-io/leaflet-geoman-free";
import "@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css";

2. Leaflet-Geoman使用

2.1. Leaflet-Geoman初始化

方式一

导入Leaflet-Geoman模块后， Leaflet-Geoman就初始化完成了。

• 如果想要某个图层被Leaflet-Geoman忽略（不可编辑）可以这样设设置

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

• 将图层设置为可编辑状态

layer.options.pmIgnore = false;
L.PM.reInitLayer(layer);

方式二

你也可以将 Leaflet-Geoman 作为一个可选项（OptIn）导入到地图功能中。

L.PM.setOptIn(true);  // 启用 Leaflet-Geoman
L.PM.setOptIn(false);  // 禁用 Leaflet-Geoman

• 在一个地图上启用 Leaflet-Geoman

const map = L.map("map", { pmIgnore: false });

• Opt-In还会导致新绘制的图层被忽略。您可以在按如下方式绘制后立即对它们进行初始化：

map.on("pm:create", (e) => {
  e.layer.options.pmIgnore = false;
  L.PM.reInitLayer(e.layer);
});

2.2. Leaflet-Geoman 工具条

// add Leaflet-Geoman controls with some options to the map  
map.pm.addControls({  
  position: 'topleft',  
  drawCircleMarker: false,
  rotateMode: false,
});

• map.pm上的方法
  
  请参阅下表中的可用选项，选择使用 options。
  
• 工具条上的不同按钮对应不同的功能，如绘制点（drawMarker，drawCircleMarker），绘制线（drawPolyline），绘制面（drawRectangle，drawPolygon，drawCircle）等等。
• 除了使用点击按钮的方式调用外，我们还可以使用通过函数的方式调用。函数调用方式可以设置相关参数更加灵活。即使通过工具栏启用/禁用了模式，这些选项也将保持不变。

// make polygon not snappable during draw  
map.pm.enableDraw('Polygon',{ snappable: false });  
map.pm.disableDraw();
// make all layers not snappable during draw  
map.pm.setGlobalOptions({ snappable: false }); 

2.3. Leaflet-Geoman 模式

绘制模式（Draw Mode）

• 在某 map 上启用 Draw Mode ,当前 Leaflet-Geoman 可以编辑的类型有 Marker, CircleMarker, Circle, Line, Rectangle, Polygon, Text, Cut, CutCircle 和 Split。

// enable polygon Draw Mode
map.pm.enableDraw("Polygon", {
  snappable: true,
  snapDistance: 20,
});

// disable Draw Mode
map.pm.disableDraw();

• map.pm 上有关 Draw Mode 的方法
  
• Options可选项如下表
  
  
• map.pm.setGlobalOptions({}) 参数设置

// Add the created layers to a layergroup instead to the map.
map.pm.setGlobalOptions({
  layerGroup: map,  
});

• Draw Mode 绘制开启，要素绘制完毕，结束事件的回调方法如下表：
  
  “pm:drawstart” 事件回调函数设置代码如下：

map.on("pm:drawstart", (e) => {
  console.log(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);
  });
});

编辑模式（Edit Mode）

• 您可以为某一 map 上的所有 layers 启用编辑模式，如下所示：

// enable global Edit Mode
map.pm.enableGlobalEditMode(options);

• 开启单个图层的编辑模式

// enable Edit Mode
layer.pm.enable({
  allowSelfIntersection: false,
});

• map.pm 有关 Edit Mode 相关方法如下表
  
• layer.pm:（layer 为某一图层实例对象）上有关 Edit Mode 相关方法如下表：
  
• Options 可选项
  
  
• Edit Mode 相关事件回调函数设置如下，相关事件如下表：

// listen to when a layer is changed in Edit Mode
layer.on("pm:edit", (e) => {
  console.log(e);
});
// Fired when Edit Mode is toggled
map.on("pm:globaleditmodetoggled", (e) => {
  console.log(e);
});

删除模式（Removal Mode）

• 您可以为某一 map 上的所有 layers 启用删除模式，如下所示：

// enable removal mode like this:
map.pm.enableGlobalRemovalMode();

• map.pm有关 Removal Mode 的方法
  
• Removal Mode 在 layer 实例上的监听事件回调

// 	Fired when a layer is removed via Removal Mode
layer.on("pm:remove", (e) => {
  console.log(e);
});

• Removal Mode 在 map 实例上的监听事件回调

// Fired when Removal Mode is toggled
map.on("pm:globalremovalmodetoggled", (e) => {
  console.log(e);
});

map 实力上可以监听的相关事件

2.4. 图层组（Layer Group）

• Leaflet Geoman只能与L.FeatureGroup和L.GeoJSON（L.LayerGroup的扩展版本）一起正常工作，
• layergroup.pm 上可用的方法
  

2.5. 自定义图层样式（Customize Style）

• 自定义绘制图层的样式，可以在调用 enableDraw 方法是，通过 options 进行设置，也可以通过如下代码方式手动设置：

map.pm.setPathOptions({
  color: "orange",
  fillColor: "green",
  fillOpacity: 0.4,
},{
  ignoreShapes: ["Circle", "Rectangle"],  // 忽略的几何类型
 });