Javascript 传单圆半径到英尺

Question

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

这是当前情况：

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

 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);

如果您需要英里和码，请将 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/leaflet@1.2.0/dist/leaflet.css" integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ==" crossorigin=""/>

    <script src="https://unpkg.com/leaflet@1.2.0/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>

Javascript 传单圆半径到英尺

Javascript leaflet circle radius to feet

javascript

leaflet

react-leaflet