leaflet实现简单量算工具功能(附源码下载)
Posted giserhome
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了leaflet实现简单量算工具功能(附源码下载)相关的知识,希望对你有一定的参考价值。
前言
leaflet 入门开发系列环境知识点了解:
- leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等
- leaflet 在线例子
- leaflet 插件,leaflet 的插件库,非常有用
内容概览
leaflet实现简单量算工具功能
源代码demo下载
实现借助了一个插件leaflet-measure-path,插件的下载地址:https://github.com/ProminentEdge/leaflet-measure-path
效果图如下:
- 部分核心代码,完整的见源码demo下载
// 面积测量方法 var areaMeasure = { points:[], //markers:[], color: "red", layers: L.layerGroup(), polygon: null, marker:null, init:function(){ areaMeasure.points = []; areaMeasure.polygon = null; areaMeasure.marker = null; map.on(‘click‘, areaMeasure.click).on(‘dblclick‘, areaMeasure.dblclick); }, close:function(latlng){ areaMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) { //console.log(‘marker‘,e); if(areaMeasure.polygon) map.removeLayer(areaMeasure.polygon); if(areaMeasure.marker) areaMeasure.marker.remove(); }); //areaMeasure.markers.push(marker); }, click:function(e){ map.doubleClickZoom.disable(); // 添加点信息 areaMeasure.points.push(e.latlng); // 添加面 map.on(‘mousemove‘, areaMeasure.mousemove); }, mousemove:function(e){ areaMeasure.points.push(e.latlng); if(areaMeasure.polygon) map.removeLayer(areaMeasure.polygon); areaMeasure.polygon = L.polygon(areaMeasure.points,{showMeasurements: true, color: ‘red‘}); //areaMeasure.polygon.addTo(map); areaMeasure.polygon.addTo(areaMeasure.layers); areaMeasure.layers.addTo(map); areaMeasure.points.pop(); }, dblclick:function(e){ // 双击结束 console.log(‘双击结束‘,e); areaMeasure.polygon.addTo(areaMeasure.layers); areaMeasure.close(e.latlng); //areaMeasure.polygon.enableEdit(); //map.on(‘editable:vertex:drag editable:vertex:deleted‘, areaMeasure.polygon.updateMeasurements, areaMeasure.polygon); map.off(‘click‘, areaMeasure.click).off(‘mousemove‘, areaMeasure.mousemove).off(‘dblclick‘, areaMeasure.dblclick); }, destory:function(){ if(areaMeasure.polygon) map.removeLayer(areaMeasure.polygon); if(areaMeasure.marker) areaMeasure.marker.remove(); } } // 距离测量方法 var distanceMeasure = { points:[], //markers:[], color: "red", layers: L.layerGroup(), polyline: null, marker:null, init:function(){ distanceMeasure.points = []; distanceMeasure.polyline = null; distanceMeasure.marker = null; map.on(‘click‘, distanceMeasure.click).on(‘dblclick‘, distanceMeasure.dblclick); }, close:function(latlng){ distanceMeasure.marker = L.marker(latlng, { icon: deleteIcon }).addTo(map).on("click", function (e) { //console.log(‘marker‘,e); if(distanceMeasure.polyline) map.removeLayer(distanceMeasure.polyline); if(distanceMeasure.marker) distanceMeasure.marker.remove(); }); }, click:function(e){ map.doubleClickZoom.disable(); // 添加点信息 distanceMeasure.points.push(e.latlng); // 添加线 map.on(‘mousemove‘, distanceMeasure.mousemove); }, mousemove:function(e){ distanceMeasure.points.push(e.latlng); if(distanceMeasure.polyline) map.removeLayer(distanceMeasure.polyline); distanceMeasure.polyline = L.polyline(distanceMeasure.points,{showMeasurements: true, color: ‘red‘}); distanceMeasure.polyline.addTo(distanceMeasure.layers); distanceMeasure.layers.addTo(map); distanceMeasure.points.pop(); }, dblclick:function(e){ // 双击结束 console.log(‘双击结束‘,e); distanceMeasure.polyline.addTo(distanceMeasure.layers); distanceMeasure.close(e.latlng); //distanceMeasure.polygon.enableEdit(); //map.on(‘editable:vertex:drag editable:vertex:deleted‘, distanceMeasure.polygon.updateMeasurements, distanceMeasure.polygon); map.off(‘click‘, distanceMeasure.click).off(‘mousemove‘, distanceMeasure.mousemove).off(‘dblclick‘, distanceMeasure.dblclick); }, destory:function(){ if(distanceMeasure.polyline) map.removeLayer(distanceMeasure.polyline); if(distanceMeasure.marker) distanceMeasure.marker.remove(); } }
完整demo源码见小专栏文章尾部:小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
以上是关于leaflet实现简单量算工具功能(附源码下载)的主要内容,如果未能解决你的问题,请参考以下文章
leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)
leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)