如何解决如何使用角度的传单开放式街道地图将标记图标从一个纬度,经度移动到另一处从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();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。