如何使用 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

leaflet

typescript

angular-leaflet-directive

angular