Как переместить маркеры на openstreetmap с помощью листовки?

Question

Я использую API, который дает в реальном времени позиции самолетов.

В листовке я использую широту и долготу, чтобы отобразить маркер каждой плоскости на карте. Я хотел бы переместить маркер, когда создаю новый каждый раз, когда обновляется мой скрипт.

setInterval(() => {
fetch("https://opensky-network.org/api/states/all")
    .then((res) => {
        return res.json();
    })
    .then((res) => {

            for (let i = 0; i < res.states.length; i++) {
                if (res.states[i][2] == 'France') {
                    if (res.states[i][5] != null || res.states[i][6] != null) {
                        posA = res.states[i][5];
                        posB = res.states[i][6];
                        marker = L.marker([posB, posA]);
                        marker.addTo(mymap);
                    }
                }

            }


    })
    .catch((err) => {
        if (err) throw err
    })
}, 3000);

Я попробовал это, но не сработало:

var newLatLng = new L.LatLng(posB, posA);
marker.setLatLng(newLatLng);

Answer 1

Вы можете сохранить хеш для поиска, если маркер уже существует для данной ИКАО, создать маркер при необходимости или обновить его позицию. Что-то вроде:

function fetchData() {
    return fetch("https://opensky-network.org/api/states/all")
        .then((res) => {
            return res.json();
        })
        .then((res) => {
            return res.states.filter((state) => {
                return (state[2] === 'France') && (state[5]) && (state[6]);
            });
        })
        .catch((err) => {
            if (err) throw err
        });
}

function plotStates(map, markers) {
    fetchData().then(function(states) {
        states.forEach((state) => {
            const lat = state[6],
                  lng = state[5],
                  icao24 = state[0];

            if (markers[icao24]) {
                markers[icao24].setLatLng([lat, lng]);
            } else {
                markers[icao24] = L.marker([lat, lng]);
                markers[icao24].addTo(map);
            }
        });
        setTimeout(() => plotStates(map, markers), 3000);
    });
}

const markers = {};
plotStates(map, markers);

И демоверсия

function fetchData() {
return fetch("https://opensky-network.org/api/states/all")
    .then((res) => {
        return res.json();
    })
    .then((res) => {
        return res.states.filter((state) => {
            return (state[2] === 'France')
              && (state[5]) && (state[6]);
        });
    })
    .catch((err) => {
        if (err) throw err
    })
}

function plotStates(map, markers) {
    fetchData().then(function(states) {
        states.forEach((state) => {
            const lat = state[6],
                  lng = state[5],
                  icao24 = state[0];

            if (markers[icao24]) {
                markers[icao24].setLatLng([lat, lng]);
            } else {
                markers[icao24] = L.marker([lat, lng]);
                markers[icao24].addTo(map);
            }
        });
        setTimeout(() => plotStates(map, markers), 3000);
    });
}

var map = L.map(document.getElementById('map')).setView([48.8583736, 2.2922926], 4);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.marker([48.8583736, 2.2922926]).addTo(map);

const markers = {};
plotStates(map, markers);

html, body {
  height: 100%;
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>

<div id='map'></div>