基于Leaflet.draw的gis图形标绘实战-阿里云开发者社区

基于Leaflet.draw的gis图形标绘实战

2022-08-23 526

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本文将通过编码的方式讲解如何引入Leaflet.draw组件，并绘制点、线、面、圆对象，同时可以计算线的距离，面积，圆半径和点的经纬度等信息。通过本文可了解基本操作，可以基于leaflet扩展相关的绘制组件，为空间检索等

本文将通过编码的方式讲解如何引入Leaflet.draw组件，并绘制点、线、面、圆对象，同时可以计算线的距离，面积，圆半径和点的经纬度等信息。通过本文可了解基本操作，可以基于leaflet扩展相关的绘制组件，为空间检索等功能奠定基础。

本文需要使用的组件：

1、Leaflet.js

2、Leaflet.draw.js 地址：https://github.com/Leaflet/Leaflet.draw

第一步、到github上下载相应的组件包

第二步、在页面上引入绘制组件

<scriptsrc="libs/leaflet-src.js"></script><linkrel="stylesheet"href="libs/leaflet.css"/><scriptsrc="../../src/Leaflet.draw.js"></script><scriptsrc="../../src/Leaflet.draw.cn.js"></script><scriptsrc="../../src/Leaflet.Draw.Event.js"></script><linkrel="stylesheet"href="../../src/leaflet.draw.css"/><scriptsrc="../../src/Toolbar.js"></script><scriptsrc="../../src/Tooltip.js"></script><scriptsrc="../../src/ext/GeometryUtil.js"></script><scriptsrc="../../src/ext/LatLngUtil.js"></script><scriptsrc="../../src/ext/LineUtil.Intersect.js"></script><scriptsrc="../../src/ext/Polygon.Intersect.js"></script><scriptsrc="../../src/ext/Polyline.Intersect.js"></script><scriptsrc="../../src/ext/TouchEvents.js"></script><scriptsrc="../../src/draw/DrawToolbar.js"></script><scriptsrc="../../src/draw/handler/Draw.Feature.js"></script><scriptsrc="../../src/draw/handler/Draw.SimpleShape.js"></script><scriptsrc="../../src/draw/handler/Draw.Polyline.js"></script><scriptsrc="../../src/draw/handler/Draw.Marker.js"></script><scriptsrc="../../src/draw/handler/Draw.Circle.js"></script><scriptsrc="../../src/draw/handler/Draw.CircleMarker.js"></script><scriptsrc="../../src/draw/handler/Draw.Polygon.js"></script><scriptsrc="../../src/draw/handler/Draw.Rectangle.js"></script><scriptsrc="../../src/edit/EditToolbar.js"></script><scriptsrc="../../src/edit/handler/EditToolbar.Edit.js"></script><scriptsrc="../../src/edit/handler/EditToolbar.Delete.js"></script><scriptsrc="../../src/Control.Draw.js"></script><scriptsrc="../../src/edit/handler/Edit.Poly.js"></script><scriptsrc="../../src/edit/handler/Edit.SimpleShape.js"></script><scriptsrc="../../src/edit/handler/Edit.Rectangle.js"></script><scriptsrc="../../src/edit/handler/Edit.Marker.js"></script><scriptsrc="../../src/edit/handler/Edit.CircleMarker.js"></script><scriptsrc="../../src/edit/handler/Edit.Circle.js"></script>

第三步、定义map及layerGroup对象

varmap=L.map('map').setView([28.234863, 112.944946], 9);
//底图varosm=L.tileLayer('http://localhost:8086/data/basemap_nowater/1_10_tms/{z}/{x}/{y}.jpg', {
maxZoom: 13,
minZoom:1,
attribution: '本地影像',
id: 'mapbox/streets-v11',
tileSize: 256,
zoomOffset: -1  });
vardrawnItems=L.featureGroup().addTo(map);
osm.addTo(map);
L.control.layers({
'本地影像': osm.addTo(map)
    }, { '绘制': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);

请注意以上代码中drawItems对象很重要，绘制图层需要跟这个对象进行绑定完成对象的绘制，同时定义了一个controls对象对图层进行显示控制。

第四步、map和绘制图层绑定

map.addControl(newL.Control.Draw({
edit: {
featureGroup: drawnItems,
poly : {
allowIntersection : false                }
            },
draw: {
polygon : {
allowIntersection: false,
showArea:true                }
            }
        }));

第五步、事件绑定

定义绘制对象创建的时候的回调事件，可以获取绘制的图形做一些输出

// Object created - bind popup to layer, add to feature groupmap.on(L.Draw.Event.CREATED, function(event) {
varlayer=event.layer;
varcontent=getPopupContent(layer);
if (content!==null) {
layer.bindPopup(content);
    }
drawnItems.addLayer(layer);
});

通过以上的步骤，可以完成绘制对象的基本功能，最终效果图如下：

细心的朋友会发现，绘制的提示语句是英文的（国际化操作），如何变成中文的呢？经过查找，在Leaflet.draw.js文件中定义了相关操作描述，我们可以新增一个中文js文件来覆盖默认的提示文件，如Leaflet.draw.cn.js，内容如下：

toolbar: {
// #TODO: this should be reorganized where actions are nested in actions// ex: actions.undo  or actions.cancelactions: {
title: '取消绘制',
text: '取消'      },
finish: {
title: '完成绘制',
text: '完成'      },
undo: {
title: '删除最后一个点',
text: '删除最后一个点'      },
buttons: {
polyline: '绘制一条线',
polygon: '绘制一个多边形',
rectangle: '绘制一个矩形',
circle: 'Draw a circle',
marker: 'Draw a marker',
circlemarker: 'Draw a circlemarker'      }
    }