Javascript 如何在单张开放式街道地图中使用角坐标放置半径为5KM、纬度和经度来自API的圆

在我的angular项目中，我使用单张开放街道地图放置了地图。我必须放置半径为5km的圆圈，其纬度和经度来自API。但我无法放置圆圈

我已经从API获取了Json数组，如下所示：

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

从latlong数组元素（lat，lon）中，我必须放置半径为5 km的圆，索引为0的元素（即第一个lat，lon值），其余元素放置在圆内

仪表板.component.ts

  constructor(private ds:DashboardService,private router: Router) { }
Drones:any;
  Droneid:string;
  latlong:any=[];
Drone:any;
var  map = L.map('map').setView([13.0827, 80.2707], 8);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
} ).addTo(map);
L.circle([this.drones.Drone.latlong.lat[0],this.drones.Drone.latlong.lon[0]],{radius:5000}).addTo(map);

我已经试过了，但没有在地图上显示任何圆圈。有人能帮我解决这个问题吗。

试试：

L.circle([this.drones.Drone.latlong[0].lat,this.drones.Drone.latlong[0].lon],{radius:5000}).addTo(map);

而不是：

L.circle([this.drones.Drone.latlong.lat[0],this.drones.Drone.latlong.lon[0]],{radius:5000}).addTo(map);

您需要

latlong

数组中的第一个元素

更新

this.drones.Drone.latlong.forEach((latlong, idx)=>{
    var latlng = L.latLng(latlong.lat,latlong.lon)
  if(idx === 0){
    L.circle(latlng,{radius:5000}).addTo(map);
  }else{
    L.marker(latlng).addTo(map)
  }
})

---

谢谢，为我工作，你能帮我把剩下的纬度和经度放在地图的圆圈内吗？非常感谢@Falke Design，它对我来说工作得很好。我还有一个疑问，我已经用第二个latlong对象放置了无人机图标，剩下的我已经在圆圈中放置了标记。我的任务是每1ms将无人机图标从一个纬度、经度移动到另一个坐标。你能帮我解决这个问题吗。看

this.drones.Drone.latlong.forEach((latlong, idx)=>{
    var latlng = L.latLng(latlong.lat,latlong.lon)
  if(idx === 0){
    L.circle(latlng,{radius:5000}).addTo(map);
  }else{
    L.marker(latlng).addTo(map)
  }
})