一、使用到的文件
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
本次的学习就到这里啦，可以发散脑洞，想出更好的点子。以便更清晰的记忆一些事情。
突然想到了我很喜欢的一句话，最后分享一下吧。希望有人可以看到这里，绿色是什么的颜色。嫩绿色就像我的职场生涯才刚刚开始一样。
苟日新，日日新，又日新。
时间： 2024-12-21 01:01:07