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传单圆半径到英尺

1 个答案: