如何使用角度的传单开放式街道地图将标记图标从一个纬度，经度移动到另一处从API中获取

问题描述

在我的角度应用程序中，我使用了Leaflet开放式街道地图来创建地图，并且从API中获取了经纬度数组。

{
"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 km的圆放置在数组中的第一个对象的纬度，经度值（即数组中的索引0值）上，并使用索引1值放置了无人机图标，剩余的经度值（来自latlong数组的剩余对象）我已将点放置在地图上。

但是现在我必须将无人机图标从一个纬度，经度移动到另一个（在点上），这些是从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)
}
})

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

有人可以帮我吗？

解决方法

使用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();