时间戳

首页 > 解决方案 > 如何使用带角度的传单打开街道地图将标记图标从一个纬度、经度移动到另一个（从 API 获取）

angular - 如何使用带角度的传单打开街道地图将标记图标从一个纬度、经度移动到另一个（从 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 公里的圆，第一个对象是数组中的 lat,lon 值（即数组中的索引 0 值）和索引 1 值，我放置了无人机图标，剩下的 lat， lon 值（latlong 数组中的剩余对象）我已将点放在地图上。

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

仪表板.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] 到从数组中获取的数组末尾）

任何人都可以帮助我解决这个问题。

标签： angulartypescriptleafletangular-leaflet-directive

解决方案

setTimeout使用标记的 latlng更新

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

推荐阅读