我一直在构建一个leaflet地图,允许用户使用圆形工具绘制自定义选择区域。源代码告诉我,我可以将提示信息更改为度量单位,但我不知道如何实现。
被调用以显示半径的Leaflet.draw函数:
我想将其更改为:半径:1239英尺
视觉参考:半径:377米
![Visual reference](https://istack.dev59.com/nCXmV.webp)
// Leaflet.draw.js
readableDistance: function(t, e, i, o) {
var n, s;
switch (s = "string" == typeof e ? e : i ? "feet" : o ? "nauticalMile" : e ? "metric" : "yards") {
case "metric":
n = t > 1e3 ? (t / 1e3).toFixed(2) + " km" : Math.ceil(t) + " m";
break;
case "feet":
t *= 3.28083, n = Math.ceil(t) + " ft";
break;
case "nauticalMile":
t *= .53996, n = (t / 1e3).toFixed(2) + " nm";
break;
case "yards":
default:
t *= 1.09361, n = t > 1760 ? (t / 1760).toFixed(2) + " miles" : Math.ceil(t) + " yd"
}
return n
}
我自己的Map.js(这是我当前初始化地图的方法):
// Map.js
function initMap() {
const drawControl = new L.Control.Draw({
draw: {
marker : false,
polygon : true,
polyline: {
metric: true
},
rectangle: true,
circle : {
metric: true
}
},
edit: false
});
const map = L.map('map').setView([CONFIG.MAP.LATITUDE, CONFIG.MAP.LONGITUDE], CONFIG.MAP.ZOOMLEVEL)
.on('popupopen', e => {
$(e.popup._source._icon).attr('src', CONFIG.IMG.ELEC_ACTIVE);
})
.on('popupclose', e => {
$(e.popup._source._icon).attr('src', CONFIG.IMG.ELEC_INACTIVE);
});
L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token={accessToken}', {
accessToken: CONFIG.MAP.ACCESSTOKEN
}).addTo(map);
map.addControl(drawControl);
const icon = L.icon({
iconUrl : CONFIG.IMG.ELEC_INACTIVE,
popupAnchor: [125, 25],
iconSize : [14, 18]
});
const markers = L.markerClusterGroup({
maxClusterRadius(zoom) {
return (zoom <= 14) ? 80 : 1; // radius in pixels
}
});
for (let i = 0; i < 150; i++) {
// Remove everything except the CONFIG variables, Math.random() serves as testing display.
const marker = L.marker([(Math.random() * 0.05) - 0.03 + CONFIG.MAP.LATITUDE, (Math.random() * 0.05) - 0.03 + CONFIG.MAP.LONGITUDE], {
icon,
closeButton: false
}).addTo(map).bindPopup('<p class="c-popup__content"><a class="c-popup__link" href="#">Add pole to selection</a><span class="c-popup__address">Marnixstraat 246, 1016 TL, Amsterdam<span></p>', {
'className': 'c-popup'
})
.on('click', () => {
$('.c-popup').css('width', 'auto');
});
markers.addLayer(marker);
}
map.addLayer(markers);
}
顺便说一下:我知道这个问题:Leaflet绘制插件:如何动态按图层类型隐藏/显示绘制工具
但是,最佳答案并没有完全解决我遇到的问题,此外,我更愿意避免编写新函数以重新初始化我的控件