Leaflet-Geoman
Leaflet-Geoman
Leaflet-Geoman有相关技术文档 Docs
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"], // 忽略的几何类型
});