Javascript传单圆半径以英尺为单位

Question

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

这是当前的场景:

在 map 上创建圆圈的代码是:

 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，但我自己不会以这种方式创建圆圈。

有什么建议吗？

Answer 1

L.Draw.Circle接受一个 metric 选项，默认设置为 true，用于设置公制测量系统或英制的使用。尝试一下

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

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

如果您需要英里和码，请将英尺选项设置为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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="660a0307000a0312265748544856" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

    <script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e38f8682858f8697a3d2cdd1cdd3" rel="noreferrer noopener nofollow">[email protected]</a>/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>