javascript - JavaScript小叶圆半径到英尺

我想向用户显示他正在创建的圆的半径，但以英尺和英里而不是米和公里为单位。

这是当前方案：


在地图上创建圆的代码为：

 this.map.on(L.Draw.Event.CREATED, (e:any) => {

        if (e.layer.setStyle)
            e.layer.setStyle(defaultStyle);

        this.drawnItems.addLayer(e.layer);
        let leafletIdToId = this.state.leafletIdToId;

    });

创建多边形菜单的代码：

this.drawControlFull = new L.Control.Draw({
        edit: {
            featureGroup: this.drawnItems
        },

         draw: drawOptions
    }).addTo(this.map);

我尝试了几种方法，但所有方法都依赖于L.circle，但我不是靠我自己的方式来创建该圆。

有什么建议吗？

最佳答案

L.Draw.Circle接受metric选项，默认情况下将其设置为true，该选项可设置度量标准或英制。尝试

this.drawControlFull = new L.Control.Draw({
    edit: {
        featureGroup: this.drawnItems
    },

    draw: {
        circle: {
            metric: false
        }
    }
}).addTo(this.map);

如果需要英里和码，请将feet选项设置为false：

this.drawControlFull = new L.Control.Draw({
    edit: {
        featureGroup: this.drawnItems
    },

    draw: {
        circle: {
            metric: false,
            feet: false
        }
    }
}).addTo(this.map);

如果要混合英里和英尺，则必须覆盖L.GeometryUtil.readableDistance。例如

var orgReadbleDistance = L.GeometryUtil.readableDistance;
L.GeometryUtil.readableDistance = function (distance, isMetric, isFeet, isNauticalMile, precision) {
    if (isMetric||isNauticalMile||!isFeet) return orgReadbleDistance(distance, isMetric, isFeet, isNauticalMile, precision);

    distance *= 1.09361; // distance in yards

    if (distance > 1760) {
        return L.GeometryUtil.formattedNumber(distance / 1760, 2) + ' miles';
    } else {
        return L.GeometryUtil.formattedNumber(distance * 3, 0) + ' ft';
    }
};

和演示

var orgReadbleDistance = L.GeometryUtil.readableDistance;
L.GeometryUtil.readableDistance = function (distance, isMetric, isFeet, isNauticalMile, precision) {
  if (isMetric||isNauticalMile||!isFeet) return orgReadbleDistance(distance, isMetric, isFeet, isNauticalMile, precision);
  distance *= 1.09361;

    if (distance > 1760) {
        return L.GeometryUtil.formattedNumber(distance / 1760, 2) + ' miles';
    } else {
        return L.GeometryUtil.formattedNumber(distance * 3, 0) + ' ft';
    }
};


var map = L.map('map').setView([51.505, -0.09], 13);
 L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
     attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 }).addTo(map);
 // FeatureGroup is to store editable layers
 var drawnItems = new L.FeatureGroup();
 map.addLayer(drawnItems);
 var drawControl = new L.Control.Draw({
     edit: {
         featureGroup: drawnItems
     },
     draw: {
        polygon: false,
        marker: false,
        circlemarker: false,
        rectangle: false,
        polyline: false,
        circle: {
          metric: false,
          feet: true
        }
     }
 });
 map.addControl(drawControl);

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log==" crossorigin=""></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.0/leaflet.draw.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.0/leaflet.draw.js"></script>

<div id='map'></div>