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

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

       本文需要使用的组件:

       1、Leaflet.js

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

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

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

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

<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 group
map.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'
      }
    }

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