如何使用 angular 中的传单打开街道地图检测标记在圆圈内外

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
        }
    ]
}
}

从上面的数组中，我放置了索引为 0 的 3 公里半径的圆，并放置了索引为 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度），如果无人机进入圆圈内，那个特定的弧线应该变成红色，如果无人机从圆圈里出来应该变成以前的颜色（蓝色）。

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

Answer 1

创建象限：

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/

如何使用 angular 中的传单打开街道地图检测标记在圆圈内外

How to detect marker goes inside and outside of the circle using leaflet open street map in angular

leaflet

typescript

angular-leaflet-directive

react-leaflet

angular