如何使用角度的传单地图将角度 45 的弧放置在半径为 3 公里的圆内

Question

我使用了 Leaflet 开放式街道地图。使用 API，我获取了纬度、经度数组并放置了位置 - 如下所示：

{
  "Drone": {
    "Droneid": 1001,
    "latlong": [
        {
            "lat": 12.989839,
            "lon": 80.198822
        },
        {
            "lat": 13.051832,
            "lon": 80.194480
        },
        {
            "lat": 13.038453,
            "lon": 80.227442
        },
        {
            "lat": 13.009018,
            "lon": 80.242550
        },
        {
            "lat": 12.976903,
            "lon": 80.237056
        },
        {
            "lat": 12.956829,
            "lon": 80.193107
        },
        {
            "lat": 12.980917,
            "lon": 80.150531
        },
        {
            "lat": 13.007680,
            "lon": 80.149158
        },
        {
            "lat": 13.043805,
            "lon": 80.154651
        }
    ]
}
}

从上面的数组中，我将半径为 3 公里的圆放置为索引为 0，并将无人机图标放置为索引为 1，其余索引值（纬度、经度）将点放置在地图上。

并创建了无人机从 index-2 开始从一个纬度、经度到另一个纬度的运动。

现在我必须在圆圈内放置一个 45 度角的弧，如果无人机进入圆圈内，它必须变为红色。

.component.ts

 var  map = L.map('map').setView([12.0827, 80.2707], 11);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
} ).addTo(map);

var TIME = 2000; 
//var TIME = 1;

var latlngs = this.drones.Drone.latlong;
var START_IDX = 2;
var latlngIdx = START_IDX; // 0 = Circle, 1 = First position
var marker;

latlngs.forEach((latlong, idx)=>{
    var latlng = L.latLng(latlong.lat,latlong.lon)
    if(idx === 0){
      L.circle(latlng,{radius:5000}).addTo(map);
      marker = L.marker(latlng,{icon:sensoricon}).addTo(map)
     // L.circle(latlng,{radius:100}).addTo(map);
      

    }else if(idx===1){
      marker = L.marker(latlng,{icon:myIcon})
      .bindTooltip( this.drones.Drone.Droneid  ).addTo(map)
    }else if(idx>=2){
      //L.circle(latlng,{color: '#3388ff'},{radius:70}).addTo(map)
      var circleMarker = L.circle(latlng,{color: 'red'},{radius:100}).addTo(map)
    }
});

function nextLatLng(){
    if(marker){
        if(latlngIdx === latlngs.length){
            latlngIdx = START_IDX;
            
        }
        marker.setLatLng(latlngs[latlngIdx]);
        //.bindPopup( this.latlngs.lat,this.latlngs.lon  );
        latlngIdx++;
        //function () { marker.slideTo(START_IDX,   {duration:5000}); };
        setTimeout(nextLatLng,TIME); 
    }
}
nextLatLng();

我尝试了很多方法，但都不起作用。谁能帮我解决这个问题？

Answer 1

您可以使用 destination 函数 GeometryUtil 创建您的 45 度区域，然后检查该点是否在区域内 isMarkerInsidePolygon

var circle = L.circle(latlng,{radius:5000}).addTo(map); // your big circle
...
var MIDDLE_LINE_DEGREE = 180;
var p1 = destination(circle.getLatLng(), MIDDLE_LINE_DEGREE-22.5, circle.getRadius());
var p2 = destination(circle.getLatLng(), MIDDLE_LINE_DEGREE+22.5, circle.getRadius());
var p3 = L.GeometryUtil.destination(circle.getLatLng(), MIDDLE_LINE_DEGREE+22.5, circle.getRadius());
var area = L.polygon([circle.getLatLng(),p1,p2.p3]).addTo(map);

...

function nextLatLng(){

....
var inPolygon = isMarkerInsidePolygon(marker,area)
if(inPolygon){
   circle.setStyle({color: 'red'});
}else{
   circle.setStyle({color: '#3388ff'});
}
....
}

https://jsfiddle.net/falkedesign/73xhLdcf/

但请记住，您创建的多边形不是圆的一部分