使用Leaflet GeoMan结合天地图进行自由标绘实战

目录

前言

一、Leaflet GeoMan是什么

1、关于Leaflet GeoMan

2、关于开源版和企业版

3、相关的方法介绍

二、使用Geoman来进行自由标绘实战

1、相关资源准备

2、新建html网页

3、初始化地图及绑定Geoman控件

三、自由标绘的成果

1、整体效果

2、添加空间对象

3、开启移动和编辑 

 四、总结

---

前言

        很多人文类GIS、旅游类GIS，通常会采用WebGIS的方式想公众、游客来介绍当前用户感兴趣的地理信息。同时为了增加交互的趣味性，在这类人文类的GIS应用中，不仅可以支持底图的在线加载，同时还可以支持用户自主的来编辑或设置一些标绘，把一些用户自己感兴趣的空间位置信息进行图上标绘，类似于涂鸦的概念，通过这种交互性提高用户的使用欲望，从而让系统和用户结合得更好。而一些历史类的WebGIS应用也会有类似的需求，比如描述某个人物的一生，除了搜集可以获取到的位置信息，还可以基于互联网，自动关联一些感兴趣的位置、面、范围、矩形、多边形等空间信息与人物进行关联，来辅助进行说明目标任务的一生。

        类似于上面的这种操作界面，它支持各种不同的空间对象的创建和编辑，比如点、线、矩形、多边形、圆、圆点，文本标注等，同时还支持对空间对象的移动、剪切、删除、旋转等操作。用户只需要组织好自己的场景，然后基于WebGIS进行场景的创作。就像编剧一样，把各种人物按照一定的关系和出场顺序组织好，让他们依次粉墨登场。在以往的WebGIS应用开发中，我们采用的都是Leaflet.js。因此在这里，我们要想实现各种空间对象的编辑和管理，依然决定在Leaflet的可视化展示组件上来进行开发。

        本文即在这样的需求背景下诞生，首先讲解基于Leaflet开发的一个Leaflet GeoMan组件，介绍这个组件是什么，有哪些特色功能，然后介绍如何在工程中使用这些组件，最后在以一个实际的案例来实现之前我们提出来的场景。通过本文，您不但可以了解什么是Leaflet geoMan，还可以掌握它的基本用法，了解如何创建第一个基本应用，最后学会如何在WebGis界面中进行自由标绘。掌握GIS，用GIS来表达，用GIS来讲故事，从这里开始。

一、Leaflet GeoMan是什么

        本节依然来重点讲解Leaflet Geoman是什么？究竟这个组件能做些什么，它有哪些特别之处呢？在使用的时候，有哪些方法可以使用呢？这些内容都将在本节给出答案。

1、关于Leaflet GeoMan

        首先，我们来看一下在GitHub上，关于Leaflet GeoMan这个项目的简要介绍，感兴趣的朋友可以在GitHub上来查找它的源码。从而更加了解它的代码编写和设计思路。传送门。

         可以看到，在github上面，leaflet-geoman这个项目的start 数已经有2.1k，作为一个前端组件，尤其是面向webgis的前端组件，非常厉害了。下面我们结合它的官网资料来进行一些简要介绍。让您提前了解一些知识。

        首先看得到的是，这个项目的开源协议采用的MIT协议，这个协议是非常宽松的协议。首先来看一下这个项目的主要介绍。

          The most powerful leaflet plugin for drawing and editing geometry layers。Leaflet Plugin For Creating And Editing Geometry Layers Draw, Edit, Drag, Cut, Rotate, Split, Scale, Measure, Snap and Pin Layers Supports Markers, CircleMarkers, Polylines, Polygons, Circles, Rectangles, ImageOverlays, LayerGroups, GeoJSON, MultiLineStrings and MultiPolygons。

        上述文字是在其官网上的详细内容介绍，翻译成中文就是：用于绘制和编辑几何图层的最强大的Leaflet插件。用于创建和编辑几何图层的Leaflet插件绘制、编辑、拖动、剪切、旋转、分割、缩放、测量、捕捉和固定图层支持标记、圆标记、折线、多边形、圆、直角、图像叠加、图层组、GeoJSON、多线串和多多边形。从以上内容可知，其是针对Leaflet的一种扩展。

2、关于开源版和企业版

        虽然这款软件是开源的，但是其还是有开源版和企业版的区别，关于这两个版本的主要差别，在Leaflet-geoman的官方文档上有简要的说明。与市面上大多数的软件一致，企业版的功能比开源版的要多一些，这也是正常的。企业版（pro）版的功能要比开源版强大一些。如果您在平时的工作中确实需要这些新特性，那不妨去支持一下这个项目。企业版的不同之处主要分几个方面，第一个方面是企业版支持的模式多一些，如下图所示：

        上图红色框中的就是企业版独有的Mode，在开源版中没有。 当然，除了Mode的区别之外，在Options配置方面也是有一些区别。

        在实际的项目中，在引入Leaflet-geoman资源时，需要注意不同的版本的选择，开源版的资源引入使用如下所示：

<linkrel="stylesheet"href="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.css"
/>

        同时还要引入javascript(请注意，这里使用的是free版本）:

<script src="https://unpkg.com/@geoman-io/leaflet-geoman-free@latest/dist/leaflet-geoman.js"></script>

        企业版的相关资源引入，需要申请key等令牌后才能访问。

3、相关的方法介绍

        除了介绍怎么下载geoman项目，还介绍了这个项目的两个不同版本区别，最后还是回归到技术来，就是geoman这个项目的相关方法和属性怎么去设置，工具栏的配置方法是什么？这里将重点介绍一下。首先来介绍一下工具栏的配置，在Leaflet界面中，要想触发编辑或者新增，都需要在工具栏上来统一出发。因此首先介绍工具栏的配置。工具栏的参数如下：

Method	Returns	Description
addControls(options)	-	Adds the Toolbar to the map. The options are optional. Buttons can be removed with setting them to false.
removeControls()	-	Removes the Toolbar from the map.
toggleControls()	-	Toggle the visiblity of the Toolbar.
controlsVisible()	Boolean	Returns true if the Toolbar is visible on the map.

        然后我们具体来看下options这个配置参数具体有哪些？

Option	Default	Description
position	'topleft'	Toolbar position, possible values are 'topleft', 'topright', 'bottomleft', 'bottomright'
positions	Object	The position of each block (draw, edit, custom, options⭐) can be customized. If not set, the value from position is taken. Default: {draw: '', edit: '', options: '', custom: ''} Block Position
drawMarker	true	Adds button to draw Markers.
drawCircleMarker	true	Adds button to draw CircleMarkers.
drawPolyline	true	Adds button to draw Line.
drawRectangle	true	Adds button to draw Rectangle.
drawPolygon	true	Adds button to draw Polygon.
drawCircle	true	Adds button to draw Circle.
drawText	true	Adds button to draw Text.
editMode	true	Adds button to toggle Edit Mode for all layers.
dragMode	true	Adds button to toggle Drag Mode for all layers.
cutPolygon	true	Adds button to cut a hole in a Polygon or Line.
removalMode	true	Adds a button to remove layers.
rotateMode	true	Adds a button to rotate layers.
oneBlock	false	All buttons will be displayed as one block Customize Controls.
drawControls	true	Shows all draw buttons / buttons in the draw block.
editControls	true	Shows all edit buttons / buttons in the edit block.
customControls	true	Shows all buttons in the custom block.
optionsControls	true	Shows all options buttons / buttons in the option block ⭐.
pinningOption	true	Adds a button to toggle the Pinning Option ⭐.
snappingOption	true	Adds a button to toggle the Snapping Option ⭐.
splitMode	true	Adds a button to toggle the Split Mode for all layers ⭐.
scaleMode	true	Adds a button to toggle the Scale Mode for all layers ⭐.
autoTracingOption	false	Adds a button to toggle the Auto Tracing Option ⭐.
snapGuidesOption	true	Adds a button to toggle the SnapGuides Option ⭐.

        请注意，上面的配置选项中，标红色的是企业版采用的功能，如果是用开源版，不用管这些参数即可。篇幅有限，类似于这种设置，大家可以参考管网来进行合理配置，说明文档。其它的文档说明不再进行赘述。

二、使用Geoman来进行自由标绘实战

        在大致掌握了Geoman是什么？它的功能是什么？究竟geoman是怎么来操作空间图形对象的呢。在实际开发中，我们怎么进行代码的编写呢。本节主要说明上面的需求实现，主要是采用实际的工程代码编写的方式。通过本节掌握如何进行geoman可编辑代码的编写。

1、相关资源准备

        在进行geoman自由标绘的时候，我们首先将需要的资源准备好。由于使用的Leaflet组件，因此我们将Leaflet需要的css和javascript文件拷贝到资源目录中。关于geom依赖的css和javascript，在前面的内容中有所涉及。

        再来看一下dist文件夹中的包含哪些文件：

         leaflet相关的css和javascript文件请从leaflet相关网站上下载即可。

2、新建html网页

        然后在文件夹中新建一个index.html文件，在这个文件中引入相关的资源，包括leaflet和geoman的css样式文件和javascript脚本文件。文件内容如下：

<!DOCTYPE >
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1" /><title>Leaflet Geoman 在线标绘实战</title><link rel="stylesheet" href="./dist/leaflet.css"/><link rel="stylesheet" href="./dist/leaflet-geoman.css" /><link rel="stylesheet" href="demo.css" /></head><body><div class="wrapper"><article><h2> Leaflet Geoman 在线标绘实战</h2><div class="map" id="map"></div></article></div><script src="./dist/leaflet.js"></script><script src="./dist/leaflet-geoman.js"></script><script src="demo.js?t=3"></script></body>
</html>

3、初始化地图及绑定Geoman控件

        在创建index.html文件，同时引入了leaflet和geoman这两个组件的相关资源后，我们来实际的设置具体的控制组件。首先绑定地图容器，同时设置加载的瓦片底图的地址，这里使用天地图的图源，大家在实际展示时，需要先将tdt的tk进行替换，或者直接将地图换成其它的图源。

/* eslint-disable no-console */
const tiles = L.tileLayer('http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=you key', {maxZoom: 18,attribution:'&copy; <a href="hhttps://www.tianditu.gov.cn/">在线图源使用国家天地图</a> contributors',
});const map = L.map('map').setView([51.505, -0.09], 13).addLayer(tiles);

        然后开启工具栏绑定，具体要开启的设置见官网说明，关键代码如下：

layerGroup.pm.toggleEdit({draggable: true,snappable: true,snapDistance: 30,
});

        最后将组件绑定到地图中，这里是将工具栏放置到右上方的位置，关键代码如下所示：

map.pm.addControls({position: 'topright',
});

        到此，已经完成了地图组件的初始化，geoman控件的绑定和渲染展示设置等。

三、自由标绘的成果

        本节以自由标绘的成果为例，主要说明在界面中如何进行使用。因此这里是交作业被检查的时候。

1、整体效果

        首先来看一下整体的效果，我们默认还设置了一些初始化的空间对象，比如线、面还有geojson类型的数据，让大家对主动加载数据有一个直观的了解。

const layerGroupItem1 = L.polyline([[51.51, -0.09],[51.513, -0.08],[51.514, -0.11],],{ pmIgnore: true }
);
const layerGroupItem2 = L.polygon([[51.52, -0.06],[51.51, -0.07],[51.52, -0.05],
]);
const layerGroupItem3 = L.polygon([[51.51549835365031, -0.06450164634969281],[51.51944818307178, -0.08425079345703125],[51.51868369995795, -0.06131630004205801],[51.51549835365031, -0.06450164634969281],
]);
const feature = {type: 'Feature',properties: {},geometry: {type: 'Polygon',coordinates: [[[72.839012, 19.058873],[72.92038, 19.066985],[72.856178, 19.019928],[72.839012, 19.058873],],],},
};
const layerGroup = L.featureGroup([layerGroupItem1]).addTo(map);

         上图是初始化展示的自由标绘底图，同时加载了几个待编辑的空间对象。

2、添加空间对象

        这里主要演示添加线、面、矩形、范围、多边形、文本标记、原型等空间对象。

3、开启移动和编辑 

        在右边的工具条中，不仅可以添加新的空间对象，同时还可以对整体信息进行编辑，比如剪切、平移、旋转等操作。直接使用鼠标点击工具栏即可完成对应的设置。当打开编辑窗口时，可以拖动关键点进行图形的位置修正。

        下面是一张我们绘制的模拟城市功能区位置示意图 

 四、总结

        以上就是本文的主要内容，本文首先讲解基于Leaflet开发的一个Leaflet GeoMan组件，介绍这个组件是什么，有哪些特色功能，然后介绍如何在工程中使用这些组件，最后在以一个实际的案例来实现之前我们提出来的场景。通过本文，您不但可以了解什么是Leaflet geoMan，还可以掌握它的基本用法，了解如何创建第一个基本应用，最后学会如何在WebGis界面中进行自由标绘。行文仓促，定有不足之处，如有不当或者需要补充的地方，还行各位专家和朋友在评论区留言指正，鄙人不胜感激。