在传单地图中，如果半径为3 km的圆内有两个移动标记中的任何一个，则如何更改两个圆的颜色

问题描述

我创建了两个3 km的圆，其圆心来自后端，并创建了带有以下给出的经度和纬度（var x，var y）的移动标记。

我的要求是，如果两个标记中的任何一个出现在任何一个圆圈内，则圆圈颜色应该变成红色（如果不在圆圈中，则应该变成蓝色）。

我已经尝试过，但是变色仅作用一个圆圈

.component.ts

 map = L.map('map').setView([12.78,80.79],12);  
    this.drones.drone1.Drone.latlong[0].lon],12);

    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 x = {
      "Drone": {
        "Droneid": 1001,"latlong": [
            {
                "lat": 12.957052,"lon": 80.241433
            },{
                "lat": 12.95379,"lon":  80.230627
            },//some array of objects of lat,lon
]
}
}

var y = {
      "Drone": {
        "Droneid": 1002,"latlong": [
            {
                "lat": 12.9516,"lon": 80.1462
            },lon

]
}
}

 TIME = 2500;

var latlngs = x.Drone.latlong;
var START_IDX = 1;
var latlngIdx = START_IDX; 
var marker;
var droneicon;
var droneicon2;
var latlngs02 = y.Drone.latlong;
var START_IDX02 = 1;
var latlngIdx02 = START_IDX02;


for(var i=0;i<this.sensors.length; i++ ){

var latlng = L.latLng(this.sensors[i].latitude,this.sensors[i].longitude)
var latlng02 = L.latLng(this.jammers[i].latitude,this.jammers[i].longitude)

    marker = L.marker(latlng,{ icon: sensoricon }).addTo(map);
    marker = L.marker(latlng02,{ icon: jammericon }).addTo(map);
    circlemark = L.circle(latlng,{ radius: 5000,weight: 0 }).addTo(map);

}
droneicon = L.marker([x.Drone.latlong[0].lat,x.Drone.latlong[0].lon],{icon : myIcon}).addTo(map);


var nextLatLng = () =>{

if(droneicon){
      if(latlngIdx === latlngs.length){
          latlngIdx = START_IDX;
      }
    droneicon.setLatLng(latlngs[latlngIdx]);
    for (var i=0; i< this.sensors.length;i++){

      if (getdistanceFromLatLonInKm(this.sensors[i].latitude,this.sensors[i].longitude,latlngs[latlngIdx].lat,latlngs[latlngIdx].lon) <= 5.0) {
        circlemark.setStyle({ color: 'red',weight: 1,opacity: 7.0 });
      }
      else {
        circlemark.setStyle({ color: 'blue',opacity: 7.0 });
      }  
      }
      //insidecirclespace();
latlngIdx++;

setTimeout(nextLatLng,TIME); 

}

  }
  
nextLatLng();

//testing

droneicon2 = L.marker([y.Drone.latlong[0].lat,y.Drone.latlong[0].lon],{icon : myIcon}).addTo(map);

var nextLatLng2 = () =>{

if(droneicon2){
      if(latlngIdx02 === latlngs02.length){ // Beginn on idx 2 if last idx is reached
          latlngIdx02 = START_IDX02;
      }
    droneicon2.setLatLng(latlngs02[latlngIdx02]);
    for (var i=0; i< this.sensors.length;i++){

      if (getdistanceFromLatLonInKm(this.sensors[i].latitude,latlngs02[latlngIdx02].lat,latlngs02[latlngIdx02].lon) <= 5.0) {
        circlemark.setStyle({ color: 'red',opacity: 7.0 });
      }  
      }
      //insidecirclespace();
latlngIdx02++;

setTimeout(nextLatLng2,TIME); 
}

  }
  
nextLatLng2();

有人可以帮我吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）