如何将我的 leaflet.draw 单位从英制更改为公制？答案

【问题标题】：How can I change my leaflet.draw units from imperial to metric?如何将我的 leaflet.draw 单位从英制更改为公制？
【发布时间】：2017-05-15 14:19:15
【问题描述】：

我一直在构建一个传单地图，允许用户使用圆形工具绘制自定义选择。源代码告诉我可以将工具提示通知更改为指标，但我不知道如何实现这一点。

半径：1239 英尺

我想改成：

半径：377 米

视觉参考：

正在调用的 Leaflet.draw 函数以显示半径：

// 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 Draw Plugin: How to hide/show drawing tools by Layer Type dynamically

但是这个最佳答案并不能完全回答我遇到的问题，此外，我宁愿避免编写一个新函数来重新初始化我的控件

【问题讨论】：

标签： javascript ecmascript-6 leaflet leaflet.draw

【解决方案1】：

看起来API documentation 确实与source code 不完全一致（版本v0.4.9）。

1) 文档不明确，但circle 选项与polyline 选项的形式相同，但它们不直接扩展它们。 IE。在polyline 上指定metric 也不会对circle 强制执行它。 => 您还需要在circle 上指定metric 选项。（我猜polygon 和 rectangle 也一样）

2) 即使metric 选项接受布尔值，它也必须是"metric" 字符串或与feet: false 选项一起使用才能生效。

var drawControl = new L.Control.Draw({
    draw: {
        circle   : {
            metric: 'metric'
        }
    }
});

或者：

var drawControl = new L.Control.Draw({
    draw: {
        circle   : {
            metric: true,
            feet: false
        }
    }
});

演示：http://playground-leaflet.rhcloud.com/qur/1/edit?html,output

注意：已知问题，请参阅Leaflet.draw issue #690。建议的解决方法正是上面描述的。

【讨论】：