如何使用角度的传单开放式街道地图来检测标记在圆的内部和外部

问题描述

我使用了传单开放的街道地图。使用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 km的圆放置在索引为0的位置，并将无人机图标放置在索引为1的位置，并将其余的索引值（纬度，长度）放置在地图上。 >

并从索引2开始创建了无人机从一种经度到另一种经度的运动。

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

现在，我必须将圆设为四个象限（90度），如果无人驾驶飞机进入该圆圈，则应将特定弧线变为红色，如果无人驾驶飞机从该圆圈中出来，则应将圆圈变为以前的颜色（蓝色）。

注意：如果无人机从圆圈中移出，它应该会消失（不应显示无人机图标）

解决方法

使用以下方法创建象限

：

function createQuadrant(circle,degree){
    var degree
    var p1 = L.GeometryUtil.destination(circle.getLatLng(),degree,circle.getRadius());
  var p2 = L.GeometryUtil.destination(circle.getLatLng(),degree+22.5,circle.getRadius());
  var p3 = L.GeometryUtil.destination(circle.getLatLng(),degree+45,circle.getRadius());
  var p4 = L.GeometryUtil.destination(circle.getLatLng(),degree+67.5,circle.getRadius());
  var p5 = L.GeometryUtil.destination(circle.getLatLng(),degree+90,circle.getRadius());
  return L.polygon([circle.getLatLng(),p1,p2,p3,p4,p5]);
}

然后测试标记是否在象限中

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


function isMarkerInsidePolygon(marker,poly) {
    var inside = false;
    var x = marker.getLatLng().lat,y = marker.getLatLng().lng;
    for (var ii=0;ii<poly.getLatLngs().length;ii++){
        var polyPoints = poly.getLatLngs()[ii];
        for (var i = 0,j = polyPoints.length - 1; i < polyPoints.length; j = i++) {
            var xi = polyPoints[i].lat,yi = polyPoints[i].lng;
            var xj = polyPoints[j].lat,yj = polyPoints[j].lng;

            var intersect = ((yi > y) != (yj > y))
                && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
            if (intersect) inside = !inside;
        }
    }

    return inside;
};


var Quadrant1 = createQuadrant(circle,0).addTo(map);
inQuadrant(Quadrant1,marker);

https://jsfiddle.net/falkedesign/w0ahrxp3/