时间戳

首页 > 解决方案 > 如何使用角度在传单开放街道地图中放置来自 API 的 5KM 半径和经纬度的圆圈

javascript - 如何使用角度在传单开放街道地图中放置来自 API 的 5KM 半径和经纬度的圆圈

问题描述

在我的角度项目中，我使用传单开放街道地图放置了地图。我必须放置半径为 5 公里的圆圈，经纬度来自 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 数组元素（纬度，经度）中，我必须将半径为 5 公里的圆与索引为 0 的元素（即第一个纬度、经度值）放在一起，其余的放在圆内。

仪表板.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);

dronedetails(){
  this.drones=JSON.parse(localStorage.getItem("drones"));
  console.log("drones",this.drones)
  console.log("array",this.drones.Drone.latlong);

}

我已经尝试过但没有在地图上显示任何圆圈，任何人都可以帮助我解决这个问题。

标签： javascriptangulartypescriptleaflet

解决方案

尝试：

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

推荐阅读