var oBtnCanvans = document.getElementsByTagName('button')[0];
oBtnCanvans.addEventListener('click', function () {
if(qjcircle!=null && qjcircle!=undefined && qjcircle!=""){
map.removeLayer(qjcircle);
$('#minwd').val("");
$('#maxwd').val("");
$('#minjd').val("");
$('#maxjd').val("");
}
map.on('mousedown', function (e) {
var lastLatlng = e.latlng;
var nowLatlng, circle;
map.dragging.disable();//关闭地图拖拽功能
map.on('mousemove', function (e) {
if (circle) {
map.removeLayer(circle);
}
var nowLatlng = e.latlng;
circle = L.rectangle([lastLatlng,nowLatlng], {color: "blue", weight: 1});
qjcircle=circle;
map.addLayer(circle);
if(arrLatLon.length==2){
//纬度
if(lastLatlng.lat>nowLatlng.lat){
$('#minwd').val(nowLatlng.lat.toFixed(2));
$('#maxwd').val(lastLatlng.lat.toFixed(2));
}else{
$('#minwd').val(lastLatlng.lat.toFixed(2));
$('#maxwd').val(nowLatlng.lat.toFixed(2));
}
//经度
if(lastLatlng.lng>nowLatlng.lng){
$('#minjd').val(nowLatlng.lng.toFixed(2));
$('#maxjd').val(lastLatlng.lng.toFixed(2));
}else{
$('#minjd').val(lastLatlng.lng.toFixed(2));
$('#maxjd').val(nowLatlng.lng.toFixed(2));
}
arrLatLon.splice(0,arrLatLon.length);
arrLatLon=[];
}else{
arrLatLon.push(e.latlng);
}
// 通过添加图层的方式绘制圆形
});
map.on('mouseup', function () {
map.dragging.enable();//绘制完后开启地图拖拽功能
map.off('mousemove',circle.mousemove).off('mouseup', circle.mouseup).off('mousedown', circle.mousedown);
})
});
}, false);
leaflet绘制图形
最新推荐文章于 2024-07-05 11:11:56 发布