因项目需要需要将leaflet重新封装一遍，暂时完成（点、矩形、圆、多边形、折线）的功能，后期功能会根据业务需要补上。
首先要下载插件：https://github.com/ProminentEdge/leaflet-measure-path
https://www.bootcdn.cn/proj4leaflet/
其他少的js文件可以按照文件名去github上下载
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <link rel="stylesheet" href="label/libs/leaflet/leaflet.css" /> 5 <link href="leaflet/leaflet.css" type="text/css" rel="stylesheet"/> 6 <link href="easy-button/easy-button.css" type="text/css" rel="stylesheet"/> 7 <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 8 <script src="label/libs/leaflet/leaflet-src.js"></script> 9 <script src="label/src/Label.js"></script> 10 <script src="label/src/BaseMarkerMethods.js"></script> 11 <script src="label/src/CircleMarker.Label.js"></script> 12 <script src="label/src/Map.Label.js"></script> 13 <script src="leaflet/leaflet.js"></script> 14 <script src="leaflet/proj4.js"></script> 15 <script src="leaflet/proj4leaflet.js"></script> 16 <style type="text/css"> 17 body { 18 padding: 0; 19 margin: 0; 20 font-family: sans-serif; 21 font-size: 10px; 22 } 23 #map { 24 position: absolute; 25 width: 100%; 26 height: 100%; 27 } 28 29 #banner { 30 position: absolute; 31 left: 30%; 32 right: 30%; 33 bottom: 12px; 34 height: 100px; 35 background: rgba(255, 255, 255, 0.8); 36 border-radius: 4px; 37 z-index: 1001; 38 text-align: center; 39 } 40 </style> 41 </head> 42 <body> 43 <div id="map" style="height:100%;width:100%;"></div> 44 <div id="banner"> 45 <button id="pointleSel" > 标点 </button> 46 <button id="rectangleSel" > 矩形 </button> 47 <button id="cycleSel" > 圆形 </button> 48 <button id="polygonleSel" > 多边形 </button> 49 <button id="lineleSel" > 折线 </button> 50 <button id="clear" > 清空图层 </button> 51 </div> 52 <script> 53 var crs = new L.Proj.CRS('EPSG:900913', 54 '+proj=merc +a=6378206 +b=6356584.314245179 +lat_ts=0.0 +lon_0=0.0 +x_0=0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext +no_defs', 55 { 56 resolutions: function () { 57 level = 19; 58 var res = []; 59 res[0] = Math.pow(2, 18); 60 for (var i = 1; i < level; i++) { 61 res[i] = Math.pow(2, (18 - i)) 62 } 63 return res; 64 }(), 65 origin: [0,0], 66 bounds: L.bounds([20037508.342789244, 0], [0, 20037508.342789244]) 67 }), 68 69 map = L.map('map', { 70 crs: crs, 71 center: [30, 100], 72 zoom: 8, 73 doubleClickZoom:false, 74 crollWheelZoom:true, 75 load:null 76 }); 77 new L.TileLayer('http://online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=pl&udt=20150518', { 78 subdomains: [0,1,2], 79 tms: true 80 }).addTo(map); 81 map.setView([39.915052,116.403954], 8); 82 83 $(function(){ 84 $("#pointleSel").unbind('click').bind('click',function(){ 85 map.on('mousedown', pointMeasure.mousedown).on('mouseup', pointMeasure.mouseup); 86 }); 87 $("#rectangleSel").unbind('click').bind('click',function(){ 88 map.on('mousedown', rectangleMeasure.mousedown).on('mouseup', rectangleMeasure.mouseup); 89 }); 90 $("#cycleSel").unbind('click').bind('click',function(){ 91 map.on('mousedown', cycleMeasure.mousedown).on('mouseup', cycleMeasure.mouseup); 92 }); 93 $("#polygonleSel").unbind('click').bind('click',function(){ 94 map.on('mousedown', polygonMeasure.mousedown).on('mouseup', polygonMeasure.mouseup); 95 }); 96 $("#lineleSel").unbind('click').bind('click',function(){ 97 map.on('mousedown', lineMeasure.mousedown).on('mouseup', lineMeasure.mouseup); 98 }); 99 $("#clear").unbind('click').bind('click',function(){ 100 clear(); 101 }); 102 }); 103 //标点绘制 104 var pointMeasure = { 105 point: null, 106 tips:null, 107 layer: L.layerGroup(), 108 color: "#0D82D7", 109 110 addTips:function(msg){ 111 pointMeasure.point.bindPopup(msg).openPopup(); 112 }, 113 mousedown: function(e){ 114 pointMeasure.point=new L.marker(e.latlng) 115 pointMeasure.addTips("坐标：["+e.latlng.lat.toFixed(3)+","+e.latlng.lng.toFixed(3)+"]"); 116 map.addLayer(pointMeasure.point) 117 }, 118 mouseup: function(e){ 119 map.dragging.enable(); 120 map.off('mousedown',pointMeasure.mousedown); 121 } 122 } 123 //矩形绘制 124 var rectangleMeasure = { 125 startPoint: null, 126 endPoint: null, 127 rectangle:null, 128 layer: L.layerGroup(), 129 color: "#0D82D7", 130 addRectangle:function(){ 131 rectangleMeasure.destory(); 132 var bounds = []; 133 bounds.push(rectangleMeasure.startPoint); 134 bounds.push(rectangleMeasure.endPoint); 135 rectangleMeasure.rectangle = L.rectangle(bounds, {color: rectangleMeasure.color, weight: 1}); 136 rectangleMeasure.rectangle.addTo(rectangleMeasure.layer); 137 var northWestPoint = rectangleMeasure.rectangle.getBounds().getNorthWest(), 138 northEastPoint = rectangleMeasure.rectangle.getBounds().getNorthEast(), 139 southEastPoint = rectangleMeasure.rectangle.getBounds().getSouthEast(); 140 var width = northWestPoint.distanceTo(northEastPoint)/1000, 141 height = northEastPoint.distanceTo(southEastPoint)/1000; 142 var area = Number(width) * Number(height); 143 rectangleMeasure.layer.addTo(map); 144 rectangleMeasure.addTips("面积："+area.toFixed(3)+"平方公里"); 145 }, 146 addTips:function(msg){ 147 //msg内可以直接写html内容，样式自调 148 rectangleMeasure.rectangle.bindPopup(msg).openPopup(); 149 }, 150 close:function(){ 151 }, 152 mousedown: function(e){ 153 rectangleMeasure.rectangle = null; 154 rectangleMeasure.tips = null; 155 map.dragging.disable(); 156 rectangleMeasure.startPoint = e.latlng; 157 map.on('mousemove',rectangleMeasure.mousemove) 158 }, 159 mousemove:function(e){ 160 rectangleMeasure.endPoint = e.latlng; 161 rectangleMeasure.addRectangle(); 162 map.off('mousedown ', rectangleMeasure.mousedown).on('mouseup', rectangleMeasure.mouseup); 163 }, 164 mouseup: function(e){ 165 map.dragging.enable(); 166 map.off('mousemove',rectangleMeasure.mousemove).off('mouseup', rectangleMeasure.mouseup).off('mousedown', rectangleMeasure.mousedown); 167 }, 168 destory:function(){ 169 if(rectangleMeasure.rectangle) 170 rectangleMeasure.layer.removeLayer(rectangleMeasure.rectangle); 171 } 172 } 173 //圆形绘制 174 var cycleMeasure = { 175 startPoint: null, 176 endPoint: null, 177 circle:null, 178 tips:null, 179 color: "#0D82D7", 180 fillOpacity:0.2, 181 radius:null, 182 addTips:function(msg){ 183 cycleMeasure.circle.bindPopup(msg).openPopup(); 184 }, 185 mousedown: function(e){ 186 cycleMeasure.circle = new L.circle(); 187 cycleMeasure.tips = null; 188 map.dragging.disable(); 189 cycleMeasure.startPoint = e.latlng; 190 map.on('mousemove',cycleMeasure.mousemove) 191 }, 192 mousemove:function(e){ 193 if(cycleMeasure.startPoint) { 194 cycleMeasure.radius = L.latLng(e.latlng).distanceTo(cycleMeasure.startPoint); 195 cycleMeasure.circle.setLatLng(cycleMeasure.startPoint); 196 cycleMeasure.circle.setRadius(cycleMeasure.radius); 197 cycleMeasure.circle.setStyle({color: cycleMeasure.color, weight: 1}); 198 // cycleMeasure.circle.setOpacity({fillOpacity:cycleMeasure.fillOpacity}); 199 map.addLayer(cycleMeasure.circle); 200 } 201 }, 202 mouseup: function(e){ 203 cycleMeasure.radius = L.latLng(e.latlng).distanceTo(cycleMeasure.startPoint); 204 console.log(cycleMeasure.radius); 205 cycleMeasure.radius = L.latLng(e.latlng).distanceTo(cycleMeasure.startPoint); 206 cycleMeasure.circle.setLatLng(cycleMeasure.startPoint); 207 cycleMeasure.circle.setRadius(cycleMeasure.radius); 208 cycleMeasure.circle.setStyle({color: cycleMeasure.color, weight: 1}); 209 map.addLayer(cycleMeasure.circle); 210 var area = Number(cycleMeasure.radius)/1000 * Number(cycleMeasure.radius)/1000*3.14; 211 cycleMeasure.addTips("面积："+area.toFixed(3)+"平方公里"); 212 map.dragging.enable(); 213 map.off('mousemove',cycleMeasure.mousemove).off('mouseup', cycleMeasure.mouseup).off('mousedown', cycleMeasure.mousedown); 214 } 215 } 216 //多边形形绘制 217 var polygonMeasure = { 218 polygons:new L.polyline([]), 219 tips:null, 220 color: "#0D82D7", 221 points:[], 222 fillOpacity:0.2, 223 polygonsEnd:new L.polyline([]), 224 lines:new L.polyline([]), 225 addTips:function(msg){ 226 polygonMeasure.polygonsEnd.bindPopup(msg).openPopup(); 227 }, 228 229 mousedown: function(e){ 230 polygonMeasure.points.push([e.latlng.lat,e.latlng.lng]) 231 polygonMeasure.lines.addLatLng(e.latlng) 232 map.addLayer(polygonMeasure.lines) 233 map.addLayer(L.circle(e.latlng,{color:polygonMeasure.color,fillOpacity:polygonMeasure.fillOpacity})) 234 map.on('mousemove',polygonMeasure.mousemove).on('dblclick',polygonMeasure.dblclick) 235 }, 236 mousemove:function(e){ 237 if(polygonMeasure.points.length>0) { 238 ls=[polygonMeasure.points[polygonMeasure.points.length-1],[e.latlng.lat,e.latlng.lng]] 239 polygonMeasure.polygons.setLatLngs(ls) 240 polygonMeasure.polygons.setStyle({color:polygonMeasure.color,fillOpacity:polygonMeasure.fillOpacity}) 241 map.addLayer(polygonMeasure.polygons) 242 243 } 244 map.on('dblclick',polygonMeasure.dblclick) 245 246 }, 247 mouseup: function(e){ 248 map.on('mousemove',polygonMeasure.mousemove).on('dblclick',polygonMeasure.dblclick) 249 }, 250 dblclick:function(e) 251 { 252 polygonMeasure.polygonsEnd = L.polygon([polygonMeasure.points],{color:polygonMeasure.color,fillOpacity:polygonMeasure.fillOpacity}) 253 map.addLayer(polygonMeasure.polygonsEnd) 254 var area = GetArea(polygonMeasure.points); 255 polygonMeasure.addTips("面积："+area.toFixed(3)+"平方公里"); 256 polygonMeasure.points=[]; 257 polygonMeasure.lines=new L.polyline([]) 258 polygonMeasure.polygons=new L.polyline([]) 259 map.off('mousemove',polygonMeasure.mousemove).off('mouseup', polygonMeasure.mouseup).off('mousedown', polygonMeasure.mousedown).off('dblclick',polygonMeasure.dblclick); 260 } 261 } 262 //折线绘制 263 var lineMeasure = { 264 tempLines:new L.polyline([]), 265 tempLinesEnd:new L.polyline([]), 266 tips:null, 267 color: "#0D82D7", 268 points:[], 269 length:0, 270 fillOpacity:0.2, 271 lines:null, 272 addTips:function(msg){ 273 lineMeasure.tempLinesEnd.bindPopup(msg).openPopup(); 274 }, 275 mousedown: function(e){ 276 lineMeasure.lines = new L.polyline(lineMeasure.points,{color:lineMeasure.color,fillOpacity:lineMeasure.fillOpacity}); 277 lineMeasure.points.push([e.latlng.lat,e.latlng.lng]) 278 lineMeasure.lines.addLatLng(e.latlng) 279 map.addLayer(lineMeasure.lines) 280 map.addLayer(L.circle(e.latlng,{color:lineMeasure.color,fillOpacity:lineMeasure.fillOpacity})) 281 map.on('mousemove',lineMeasure.mousemove).on('dblclick',lineMeasure.dblclick) 282 }, 283 mousemove:function(e){ 284 285 if(lineMeasure.points.length>0) { 286 ls=[lineMeasure.points[lineMeasure.points.length-1],[e.latlng.lat,e.latlng.lng]] 287 lineMeasure.length += L.latLng(e.latlng).distanceTo(lineMeasure.points[lineMeasure.points.length-1])/1000; 288 lineMeasure.tempLines.setLatLngs(ls) 289 map.addLayer(lineMeasure.tempLines,{color:lineMeasure.color,fillOpacity:lineMeasure.fillOpacity}) 290 } 291 map.on('dblclick',lineMeasure.dblclick) 292 }, 293 mouseup: function(e){ 294 map.on('mousemove',lineMeasure.mousemove).on('dblclick',lineMeasure.dblclick) 295 }, 296 dblclick:function(e) 297 { 298 lineMeasure.tempLinesEnd=L.polyline(lineMeasure.points,{color:lineMeasure.color,fillOpacity:lineMeasure.fillOpacity}) 299 map.addLayer(lineMeasure.tempLinesEnd) 300 lineMeasure.addTips("总长度："+lineMeasure.length.toFixed(3)+"公里"); 301 lineMeasure.points=[]; 302 lineMeasure.tempLines = new L.polyline([]); 303 lineMeasure.length=0; 304 map.off('mousemove',lineMeasure.mousemove).off('mouseup', lineMeasure.mouseup).off('mousedown', lineMeasure.mousedown).off('dblclick',lineMeasure.dblclick); 305 } 306 } 307 //清除图层 308 function clear(){ 309 //清除图层 310 $("svg").children("g").children("path").remove(); 311 //清除提示 312 $(".leaflet-label-tffq").remove(); 313 //清除标点 314 $(".leaflet-marker-pane").children("img").remove(); 315 //提示信息 316 $(".leaflet-popup-pane").children(".leaflet-zoom-animated").children("div").remove(); 317 $(".leaflet-shadow-pane").children("img").remove(); 318 } 319 //画点 320 function DrewPoint(x,y) 321 { 322 point=new L.marker([x,y]) 323 map.addLayer(point) 324 point.bindPopup("坐标：["+x.toFixed(3)+","+y.toFixed(3)+"]").openPopup(); 325 } 326 //使用海伦公式获取多边形面积 327 function GetArea(pointArray) 328 { 329 var a,b,c; 330 var result=0; 331 var p;// 332 for(var i=2;i<pointArray.length-1;i++) 333 { 334 a=L.latLng(pointArray[i-1]).distanceTo(pointArray[0])/1000; 335 b=L.latLng(pointArray[i]).distanceTo(pointArray[0])/1000; 336 c=L.latLng(pointArray[i-1]).distanceTo(pointArray[i])/1000; 337 p=(a+b+c)/2; 338 result+=Math.sqrt(p*(p-a)*(p-b)*(p-c));//海伦公式 339 } 340 return result; 341 } 342 </script> 343 </body> 344 </html>