如何使用 angular 中的传单打开街道地图将标记图标从一个纬度、经度移动到另一个（从 API 获取）

Question

我的 angular 应用程序我使用 Leaflet open street map 创建了 map.And 我从 API.That 中获取了纬度和经度数组是

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

从上面的数组中，我已经放置了半径为 5 公里的圆，第一个对象是数组中的纬度、经度值（即数组中的索引 0 值），并使用索引 1 值放置了无人机图标，并使用剩余的经纬度值（来自经纬度数组的剩余对象）我将这些点放在地图上。

但现在我必须将无人机图标从一个纬度、经度移动到另一个（在点上）这些是从 API 中获取的数组值。

Dashboard.component.ts

 var  map = L.map('map').setView([13.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);
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 if(idx===1){
 L.marker([latlong.lat,latlong.lon],{icon:myIcon}) .addTo(map)
}
else if(idx>=2){
  L.circle(latlng,{radius:20}) .addTo(map)
}
})

那么如何将无人机图标（即索引=1）移动到地图中的点（从索引[2]到从数组中获取的数组末尾）

谁能帮我解决这个问题。

Answer 1

更新 setTimeout 标记的经纬度

var TIME = 1000; // 1000 milliseconds = 1 second
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);
    }else if(idx===1){
      marker = L.marker(latlng,{icon:myIcon}).addTo(map)
    }else if(idx>=2){
      L.circle(latlng,{radius:20}) .addTo(map)
    }
});

function nextLatLng(){
    if(marker){
        if(latlngIdx === latlngs.length){ // Beginn on idx 2 if last idx is reached
            latlngIdx = START_IDX;
        }
        marker.setLatLng(latlngs[latlngIdx]);
        latlngIdx++;
        setTimeout(nextLatLng,TIME); // recall nextLatLng() after 1000 ms
    }
}
nextLatLng();

如何使用 angular 中的传单打开街道地图将标记图标从一个纬度、经度移动到另一个（从 API 获取）

How to move the marker icon from one latitude,longitude to another (fetched from the API) using leaflet open street map in angular

angular

typescript

leaflet

angular-leaflet-directive