Leaflet 如何将90度角的圆弧放置在半径为5km的圆内（使用角形的单张地图），以及如何更改圆的颜色

在我的angualr项目中，我创建了带有传单的地图，并创建了半径为5km的圆，坐标来自后端。类似于：

 "drone1": {
        "Drone": {
            "Droneid": 1001,
           
            "latlong": [
                {
                    "lat": 12.979377,
                    "lon": 80.195147
                },
                {
                    "lat": 12.957052,
                    "lon": 80.241433
                },
                {
                    "lat": 12.95379,
                    "lon": 80.230627
                },
                {
                    "lat": 12.956634,
                    "lon": 80.18737
                },
                {
                    "lat": 12.952619,
                    "lon": 80.17072
                },
                {
                    "lat": 12.950946,
                    "lon": 80.150122
                },
                {
                    "lat": 12.949356,
                    "lon": 80.134757
                }
            ]
        }

根据上面的对象，我创建了半径为5km的圆，索引为0，索引为1，创建了无人机图标，索引为2，创建了点

从第二个索引开始，无人机必须从一个地方移动到另一个地方，如果无人机进入5公里的圆圈内，它（圆圈）必须变为红色，否则变为蓝色

我已经完成了上述对象的移动无人机和颜色更改，但现在我的要求是我有另一个JSON对象（无人机2），类似于：

 "drone2": {
        "Drone": {
            "Droneid": 1002,
            
            "latlong": [
                {
                    "lat": 12.979377,
                    "lon": 80.195147
                },
                {
                    "lat": 13.021618,
                    "lon": 80.140019
                },
                {
                    "lat": 13.000376,
                    "lon": 80.164602
                },
                {
                    "lat": 12.991009,
                    "lon": 80.174901
                },
                {
                    "lat": 12.980304,
                    "lon": 80.184514
                },
                {
                    "lat": 12.965416,
                    "lon": 80.20838
                },
                {
                    "lat": 12.936976,
                    "lon": 80.24117
                }
            ]
        }
    }
}

因此，对于该对象，我还必须创建半径为5 km的圆，并从索引移动，功能与上述相同。

但是，当我尝试圆的颜色是变化的，只有一个雄蜂对其他的颜色是不变的

.component.ts

var latlngs = this.drones.drone1.Drone.latlong;
var latlngs02 = this.drones.drone2.Drone.latlong;
var START_IDX = 2;
var latlngIdx = START_IDX; // 0 = Circle, 1 = First position
var marker;
var circlemark;
var circle;
latlngs.forEach((latlong, idx)=>{
    var latlng = L.latLng(latlong.lat,latlong.lon)
    
    if(idx === 0){
      var jammer = {"name":"Jammer 1","lat":latlong.lat,"lon":latlong.lon,"isCollapsed":false};
      var sensor = {"name":"Sensor 1","lat":latlong.lat,"lon":latlong.lon};
      circlemark = L.circle(latlng,{radius:5000}).addTo(map);
     marker = L.marker(latlng,{icon:sensoricon}).addTo(map);
      marker = L.marker(latlng,{icon:jammericon}).addTo(map);
 
    }else if(idx===1){
      marker = L.marker(latlng,{icon:myIcon}).addTo(map);
    }else if(idx>=2){
      var circleMarker = L.circle(latlng,{color: 'red'},{radius:100}).addTo(map)
    }
});
var Quadrant1 = createQuadrant(circlemark,0).addTo(map);
var Quadrant2 = createQuadrant(circlemark,90).addTo(map);
var Quadrant3 = createQuadrant(circlemark,180).addTo(map);
var Quadrant4 = createQuadrant(circlemark,270).addTo(map);


function nextLatLng(){
    if(marker){
        if(latlngIdx === latlngs.length){ 
            latlngIdx = START_IDX;
            
        }
        marker.setLatLng(latlngs[latlngIdx]);
        inQuadrant(Quadrant1,marker);
        inQuadrant(Quadrant2,marker);
        inQuadrant(Quadrant3,marker);
        inQuadrant(Quadrant4,marker);
        
        latlngIdx++;
        
        setTimeout(nextLatLng,TIME); 
    }
}
nextLatLng();

function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
  var R = 6371; // Radius of the earth in km
  var dLat = deg2rad(lat2-lat1);  // deg2rad below
  var dLon = deg2rad(lon2-lon1); 
  var a = 
    Math.sin(dLat/2) * Math.sin(dLat/2) +
    Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) * 
    Math.sin(dLon/2) * Math.sin(dLon/2)
    ; 
  var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
  var d = R * c; // Distance in km
  
  return d;
}

function deg2rad(deg) {
  return deg * (Math.PI/180)
}

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 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;
};
function inQuadrant(quadrant,marker){
    var inPolygon = isMarkerInsidePolygon(marker,quadrant);
  if(inPolygon){
    quadrant.setStyle({color: 'red'});
  }else{
    quadrant.setStyle({color: '#3388ff'});
  }
}

var-latlngs=this.drones.drone1.Drone.latlong；
var latlngs02=this.drones.drone2.Drone.latlong；
var START_IDX=2；
var latlngIdx=START_IDX；//0=圆，1=第一个位置
var标记；
var圆形标记；
var圈；
latlngs.forEach（（latlong，idx）=>{
var latlng=L.latlng（latlong.lat，latlong.lon）
如果（idx==0）{
var jammer={“name”：“jammer 1”，“lat”：latlong.lat，“lon”：latlong.lon，“isCollapsed”：false}；
var传感器={“名称”：“传感器1”，“lat”：latlong.lat，“lon”：latlong.lon}；
圆形标记=L.圆形（板条，{半径：5000}）；
marker=L.marker（latlng，{icon:sensoricon}）.addTo（map）；
marker=L.marker（latlng，{icon:jammericon}）.addTo（map）；
}else if（idx==1）{
marker=L.marker（latlng，{icon:myIcon}）.addTo（map）；
}否则如果（idx>=2）{
var circleMarker=L.circle（latlng，{color:'red'}，{radius:100}）.addTo（map）
}
});
var Quadrant1=createQuadrant（圆圈标记，0）。addTo（映射）；
var Quadrant2=创建象限（圆圈，90）。添加到（地图）；
var Quadrant3=创建象限（圆圈，180）。添加到（地图）；
var Quadrant4=创建象限（圆圈，270）。添加到（地图）；
函数nextLatLng（）{
如果（标记）{
如果（latlngIdx==latlngs.length）{
latlngIdx=开始_IDX；
}
marker.setLatLng（latlngs[latlngIdx]）；
象限内（象限1，标记）；
象限内（象限2，标记）；
象限内（象限3，标记）；
象限内（象限4，标记）；
latlngIdx++；
setTimeout（nextLatLng，TIME）；
}
}
nextLatLng（）；
函数getDistanceFromLatLonInKm（lat1、lon1、lat2、lon2）{
var R=6371；//地球半径，单位为km
var dLat=deg2rad（lat2-lat1）；//下面是deg2rad
var-dLon=deg2rad（lon2-lon1）；
变量a=
数学单（dLat/2）*数学单（dLat/2）+
数学cos（deg2rad（lat1））*数学cos（deg2rad（lat2））*
数学单（dLon/2）*数学单（dLon/2）
; 
var c=2*Math.atan2（Math.sqrt（a），Math.sqrt（1-a））；
var d=R*c；//以公里为单位的距离
返回d；
}
功能deg2rad（度）{
返回度*（数学PI/180）
}
函数创建象限（圆、度）{
变异度
var p1=L.GeometryUtil.destination（circle.getLatLng（），degree，circle.getRadius（））；
var p2=L.GeometryUtil.destination（circle.getLatLng（），度+22.5，circle.getRadius（））；
var p3=L.GeometryUtil.destination（circle.getLatLng（），度+45，circle.getRadius（））；
var p4=L.GeometryUtil.destination（circle.getLatLng（），度+67.5，circle.getRadius（））；
var p5=L.GeometryUtil.destination（circle.getLatLng（），度+90，circle.getRadius（））；
返回L.polygon（[circle.getLatLng（），p1，p2，p3，p4，p5]）；
}
函数isMarkerInsidePolygon（标记，多边形）{
var内=假；
变量x=marker.getLatLng（）.lat，y=marker.getLatLng（）.lng；
对于（变量ii=0；ii y）！=（yj>y））
&&（x<（xj-xi）*（y-yi）/（yj-yi）+xi）；
如果（相交）内部=！内部；
}
}
返回内部；
};
象限内的功能（象限、标记）{
var inPolygon=isMarkerInsidePolygon（标记，象限）；
if（inPolygon）{
象限.setStyle（{color:'red'}）；
}否则{
象限.setStyle（{color:'#3388ff'}）；
}
}

我想将两个无人机放置在地图中，并从索引-2移动（对于索引-0，放置索引-1的圆圈，放置无人机图标），如果有任何无人机进入，则必须将颜色更改为红色，否则将变为蓝色

---

有谁能帮我解决这个问题。

您遇到了问题，一些变量被多次使用

我为您创建了一个类，现在您可以使用

drone1=new L.Drone（地图，latlngs）

var-map=L.map（'map'）.setView（[12.979377,80.195147]，12）；
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token=pk.eyj1ijoibwwwwym94iiwiysi6imnpejy4nxvycta2emycxbdhrqcmz3n3gifq.rjfig214ariislb6b5aw'{
最大缩放：180，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒。街道”
}).addTo（地图）；
变量D1={
“无人机1”：{
“无人机”：{
“无人机”：
1001,
“拉特朗”：
[
{
“lat”：12.979377，
“lon”：80.195147
},
{
“lat”：12.957052，
“lon”：80.241433
},
{
“lat”：12.95379，
“lon”：80.230627
},
{
“lat”：12.956634，
“lon”：80.18737
},
{
“lat”：12.952619，
“lon”：80.17072
},
{
“lat”：12.950946，
“lon”：80.150122
},
{
“lat”：12.949356，
“lon”：80.134757
}