002 Leaflet 第二个demo 地图上的矩形拉框选择
一、使用到的文件
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
本次的学习就到这里啦，可以发散脑洞，想出更好的点子。以便更清晰的记忆一些事情。
突然想到了我很喜欢的一句话，最后分享一下吧。希望有人可以看到这里，绿色是什么的颜色。嫩绿色就像我的职场生涯才刚刚开始一样。
苟日新，日日新，又日新。
