一、使用到的文件
leaflet-src.js
leaflet.css
label相關js, 可以從以下網址下載
https://github.com/Leaflet/Leaflet.label
需要leaflet的相關插件都可以從http://leafletjs.com/plugins.html leafletjs.com的插件列表中下載
二、源碼
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="label/libs/leaflet/leaflet.css" /> <link rel="stylesheet" href="label/leaflet.label.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="label/libs/leaflet/leaflet-src.js"></script> <script src="label/src/Label.js"></script> <script src="label/src/BaseMarkerMethods.js"></script> <script src="label/src/CircleMarker.Label.js"></script> <script src="label/src/Map.Label.js"></script> </head> <body> <div id="map" style="height:500px;width:500px;"></div> <button id="rectangleSel" > 拉框選擇 </button> <script> var map; $(function(){ map = L.map('map', { center: [40, 100], zoom: 4 }); // 影像 L.tileLayer("http://t{s}.tianditu.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", { subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"] }).addTo(map); // 地名標注 L.tileLayer("http://t{s}.tianditu.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", { subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"] }).addTo(map); // 邊界 L.tileLayer("http://t{s}.tianditu.cn/ibo_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=ibo&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles", { subdomains: ["0", "1", "2", "3", "4", "5", "6", "7"] }).addTo(map); $("#rectangleSel").unbind('click').bind('click',function(){ map.on('mousedown', rectangleMeasure.mousedown).on('mouseup', rectangleMeasure.mouseup); }); console.log(map); }); var rectangleMeasure = { startPoint: null, endPoint: null, rectangle:null, tips:null, layer: L.layerGroup(), color: "#0D82D7", addRectangle:function(){ rectangleMeasure.destory(); var bounds = []; bounds.push(rectangleMeasure.startPoint); bounds.push(rectangleMeasure.endPoint); rectangleMeasure.rectangle = L.rectangle(bounds, {color: rectangleMeasure.color, weight: 1}); rectangleMeasure.rectangle.addTo(rectangleMeasure.layer); var northWestPoint = rectangleMeasure.rectangle.getBounds().getNorthWest(), northEastPoint = rectangleMeasure.rectangle.getBounds().getNorthEast(), southEastPoint = rectangleMeasure.rectangle.getBounds().getSouthEast(); var width = northWestPoint.distanceTo(northEastPoint)/1000, height = northEastPoint.distanceTo(southEastPoint)/1000; console.log("寬", width); console.log("高", height); var area = Number(width) * Number(height); rectangleMeasure.addTips(area.toFixed(3)); rectangleMeasure.layer.addTo(map); }, addTips:function(area){ console.log('面積:'+area); rectangleMeasure.tips = L.circleMarker(rectangleMeasure.endPoint, {color: rectangleMeasure.color}); rectangleMeasure.tips.setRadius(1); rectangleMeasure.tips.bindLabel("面積：" + area + "(平方公里)", {noHide: true, direction: 'right', clickable: true, className: "leaflet-label-tffq"}); rectangleMeasure.tips.addTo(rectangleMeasure.layer); }, close:function(){ var lab = rectangleMeasure.tips.getLabel(); var tt = document.createTextNode(rectangleMeasure.tips.getLabel()._content); lab._container.innerHTML = ""; lab._container.appendChild(tt); var span = document.createElement("span"); span.innerHTML = "【關閉】"; span.style.color = "#00ff40"; lab._container.appendChild(span); L.DomEvent.addListener(span,"click",function(){ rectangleMeasure.destory(); }); }, mousedown: function(e){ rectangleMeasure.rectangle = null; rectangleMeasure.tips = null; map.dragging.disable(); rectangleMeasure.startPoint = e.latlng; map.on('mousemove',rectangleMeasure.mousemove) }, mousemove:function(e){ rectangleMeasure.endPoint = e.latlng; rectangleMeasure.addRectangle(); map.off('mousedown ', rectangleMeasure.mousedown).on('mouseup', rectangleMeasure.mouseup); }, mouseup: function(e){ rectangleMeasure.close(); map.dragging.enable(); map.off('mousemove',rectangleMeasure.mousemove).off('mouseup', rectangleMeasure.mouseup).off('mousedown', rectangleMeasure.mousedown); }, destory:function(){ if(rectangleMeasure.rectangle) rectangleMeasure.layer.removeLayer(rectangleMeasure.rectangle); if(rectangleMeasure.tips) rectangleMeasure.layer.removeLayer(rectangleMeasure.tips); } } </script> </body> </html>
三、流程講解
1、rectangleSel事件-->監聽click，mousemove, mouseup事件，設置地圖拖動為false
2、click-->畫一個點p1
3、mousemove-->依據當前的點p2 和 click時畫的點p1,在地圖上畫矩形框
4、mouseup --> 添加面積信息label, 取消click,mousemove, mouseup的事件監聽，恢復地圖拖動為true
本次的學習就到這里啦，可以發散腦洞，想出更好的點子。以便更清晰的記憶一些事情。
突然想到了我很喜歡的一句話，最后分享一下吧。希望有人可以看到這里，綠色是什么的顏色。嫩綠色就像我的職場生涯才剛剛開始一樣。
苟日新，日日新，又日新。