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

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

本文需要使用的组件：

1、Leaflet.js

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

言归正传，开始进入正题

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

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

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

第三步、定义map及layerGroup对象

var map = L.map('map').setView([28.234863, 112.944946], 9);
//底图
	var osm = 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
	});
var drawnItems = 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(new L.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) {
   
       var layer = event.layer;    var content = 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.cancel      actions: {
   
           title: '取消绘制',        text: '取消'      },      finish: {
   
           title: '完成绘制',        text: '完成'      },      undo: {
   
           title: '删除最后一个点',        text: '删除最后一个点'      },      buttons: {
   
           polyline: '绘制一条线',        polygon: '绘制一个多边形',        rectangle: '绘制一个矩形',        circle: 'Draw a circle',        marker: 'Draw a marker',        circlemarker: 'Draw a circlemarker'      }    }

通过这种方式就可以完成汉化处理，其它语言也是同样的办法处理即可。

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

猜你喜欢