在MAPBOX上删除重复标记（实时数据）

发布于 2025-01-31 03:26:05 字数 4465 浏览 1 评论 0原文

我想创建一个自定义的飞行跟踪地图。在提出问题之前，我想简要解释我的情况。我有一个ADS-B接收器，该接收器从天空中的飞机接收数据，后来解码并将其显示在地图中。

接收器有一个本地JSON输出，我想用于我的自定义地图。

  "messages" : 125778827,
  "aircraft" : [
    {"hex":"800d48","version":0,"sil_type":"unknown","mlat":[],"tisb":[],"messages":1156,"seen":95.8,"rssi":-49.5},
    {"hex":"8007df","flight":"IGO455  ","alt_baro":36000,"gs":438.7,"track":231.0,"baro_rate":-64,"squawk":"2670","category":"A0","lat":18.079958,"lon":83.322618,"nic":8,"rc":186,"seen_pos":0.5,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":8609,"seen":0.0,"rssi":-49.5},
    {"hex":"80140c","flight":"IGO6645 ","alt_baro":4425,"gs":256.9,"track":253.3,"baro_rate":64,"squawk":"0212","category":"A0","lat":17.627657,"lon":83.310111,"nic":8,"rc":186,"seen_pos":0.1,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":18201,"seen":0.1,"rssi":-49.5},
    {"hex":"801410","flight":"IGO409  ","alt_baro":33000,"gs":465.3,"track":83.2,"baro_rate":0,"squawk":"2726","category":"A0","lat":17.406673,"lon":81.141439,"nic":8,"rc":186,"seen_pos":0.0,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":14402,"seen":0.0,"rssi":-49.5},
    {"hex":"800cc3","flight":"IGO7913 ","alt_baro":14000,"gs":242.0,"track":244.3,"baro_rate":64,"squawk":"0222","category":"A0","lat":17.271951,"lon":82.387161,"nic":8,"rc":186,"seen_pos":0.7,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":126760,"seen":0.5,"rssi":-49.5},
    {"hex":"80142a","flight":"IGO6366 ","alt_baro":10275,"gs":314.0,"track":90.7,"baro_rate":-1984,"squawk":"2737","category":"A0","lat":17.460069,"lon":83.135016,"nic":8,"rc":186,"seen_pos":0.1,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":82072,"seen":0.1,"rssi":-49.5},
    {"hex":"8013fc","flight":"IGO787  ","alt_baro":36975,"gs":461.6,"track":14.9,"baro_rate":0,"squawk":"0234","category":"A0","lat":18.189077,"lon":83.025330,"nic":8,"rc":186,"seen_pos":0.3,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":201714,"seen":0.3,"rssi":-49.5},
    {"hex":"800d4f","category":"A0","version":0,"sil_type":"unknown","mlat":[],"tisb":[],"messages":134558,"seen":276.4,"rssi":-49.5}
  ]
}

这是我用于自定义地图的代码，

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #map{
            width: 100vw;
            height: 100vh;
        }

        
    </style>
    <title>Vscode local</title>
</head>
<body>
    <div id='map'></div>
    
</body>


<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<script>
  mapboxgl.accessToken = 'pk.eyJ1IjoiaGFycnkxMjM0OTgiLCJhIjoiY2s4OXh1c3BqMGFsZzNvbXA3YmYyaGFhYSJ9.wmVMiMxlSqpzJPsj-UXr3Q';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    zoom: 1,
    center: [0,20]
  });
</script>

<script src="index.js"></script>
</html>

    console.log("Updating map with realtime data")
    fetch("http://192.168.29.9/skyaware/data/aircraft.json")
        .then(response => response.json())
        .then(rsp => {
            // console.log(rsp.data)
            rsp.aircraft.forEach(element => {
                latitude = element.lat;
                longitude = element.lon;
                flightid = element.flight;

                
                // Mark on the map
                
                new mapboxgl.Marker({
                    draggable: false,
                }).setLngLat([longitude, latitude])
                .addTo(map); 
            });
        })
}


let interval = 1;
setInterval( updateMap, interval);

当我运行代码时，标记开始重复。

重复标记图像

所以我的问题是如何删除重复标记。＆amp;另外，如果你们不介意，你们能告诉我我的代码还可以..或者我应该更改一些东西..谢谢

原文

i want to create a custom flight tracking map. before coming to the question i want to explain briefly about my situation. i have an Ads-b receiver which receives the data from aircraft in the sky, which later decodes and display it in a map.

Adsb-receiver map image

The receiver has a local json output which i want to use for my custom map.

  "messages" : 125778827,
  "aircraft" : [
    {"hex":"800d48","version":0,"sil_type":"unknown","mlat":[],"tisb":[],"messages":1156,"seen":95.8,"rssi":-49.5},
    {"hex":"8007df","flight":"IGO455  ","alt_baro":36000,"gs":438.7,"track":231.0,"baro_rate":-64,"squawk":"2670","category":"A0","lat":18.079958,"lon":83.322618,"nic":8,"rc":186,"seen_pos":0.5,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":8609,"seen":0.0,"rssi":-49.5},
    {"hex":"80140c","flight":"IGO6645 ","alt_baro":4425,"gs":256.9,"track":253.3,"baro_rate":64,"squawk":"0212","category":"A0","lat":17.627657,"lon":83.310111,"nic":8,"rc":186,"seen_pos":0.1,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":18201,"seen":0.1,"rssi":-49.5},
    {"hex":"801410","flight":"IGO409  ","alt_baro":33000,"gs":465.3,"track":83.2,"baro_rate":0,"squawk":"2726","category":"A0","lat":17.406673,"lon":81.141439,"nic":8,"rc":186,"seen_pos":0.0,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":14402,"seen":0.0,"rssi":-49.5},
    {"hex":"800cc3","flight":"IGO7913 ","alt_baro":14000,"gs":242.0,"track":244.3,"baro_rate":64,"squawk":"0222","category":"A0","lat":17.271951,"lon":82.387161,"nic":8,"rc":186,"seen_pos":0.7,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":126760,"seen":0.5,"rssi":-49.5},
    {"hex":"80142a","flight":"IGO6366 ","alt_baro":10275,"gs":314.0,"track":90.7,"baro_rate":-1984,"squawk":"2737","category":"A0","lat":17.460069,"lon":83.135016,"nic":8,"rc":186,"seen_pos":0.1,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":82072,"seen":0.1,"rssi":-49.5},
    {"hex":"8013fc","flight":"IGO787  ","alt_baro":36975,"gs":461.6,"track":14.9,"baro_rate":0,"squawk":"0234","category":"A0","lat":18.189077,"lon":83.025330,"nic":8,"rc":186,"seen_pos":0.3,"version":0,"nac_p":8,"nac_v":0,"sil":2,"sil_type":"unknown","mlat":[],"tisb":[],"messages":201714,"seen":0.3,"rssi":-49.5},
    {"hex":"800d4f","category":"A0","version":0,"sil_type":"unknown","mlat":[],"tisb":[],"messages":134558,"seen":276.4,"rssi":-49.5}
  ]
}

This is my code that i used for my custom map

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.css' rel='stylesheet' />
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #map{
            width: 100vw;
            height: 100vh;
        }

        
    </style>
    <title>Vscode local</title>
</head>
<body>
    <div id='map'></div>
    
</body>


<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.1/mapbox-gl.js'></script>
<script>
  mapboxgl.accessToken = 'pk.eyJ1IjoiaGFycnkxMjM0OTgiLCJhIjoiY2s4OXh1c3BqMGFsZzNvbXA3YmYyaGFhYSJ9.wmVMiMxlSqpzJPsj-UXr3Q';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    zoom: 1,
    center: [0,20]
  });
</script>

<script src="index.js"></script>
</html>

    console.log("Updating map with realtime data")
    fetch("http://192.168.29.9/skyaware/data/aircraft.json")
        .then(response => response.json())
        .then(rsp => {
            // console.log(rsp.data)
            rsp.aircraft.forEach(element => {
                latitude = element.lat;
                longitude = element.lon;
                flightid = element.flight;

                
                // Mark on the map
                
                new mapboxgl.Marker({
                    draggable: false,
                }).setLngLat([longitude, latitude])
                .addTo(map); 
            });
        })
}


let interval = 1;
setInterval( updateMap, interval);

when i run the code the markers starts to duplicate.

duplicate marker image

So my question is how can i remove the duplicate markers. & also if you guys don't mind can you guys tell me that is my code ok.. or should i change something.. Thanks in advance

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

将军与妓 2025-02-07 03:26:05

它们是重叠的，因为您没有删除现有标记，而新的标记则是最重要的。

要解决此问题，请将新标记分配给变量，然后将其推入数组。

然后，在从新的API响应中设置新标记之前，请删除现有标记。

markersList= []; //outer scope

fetch("api")
.then(response => response.json())
.then(rsp => {
    markersList.forEach(marker => marker.remove());
    markersList = []; //reassign empty array

    rsp.aircraft.forEach(element => {
        latitude = element.lat;
        longitude = element.lon;
        flightid = element.flight;
        
        // Mark on the map
        let marker = new mapboxgl.Marker({
            draggable: false,
            }).setLngLat([longitude, latitude]);

        marker.addTo(map);
        markersList.push(marker);
    });
})

They are overlapping because you are not removing existing markers, and new ones are drawing on top.

To fix this, Assign the new marker to a variable then push it into an array.

Then before setting new markers from a new api response, remove the existing markers.

markersList= []; //outer scope

fetch("api")
.then(response => response.json())
.then(rsp => {
    markersList.forEach(marker => marker.remove());
    markersList = []; //reassign empty array

    rsp.aircraft.forEach(element => {
        latitude = element.lat;
        longitude = element.lon;
        flightid = element.flight;
        
        // Mark on the map
        let marker = new mapboxgl.Marker({
            draggable: false,
            }).setLngLat([longitude, latitude]);

        marker.addTo(map);
        markersList.push(marker);
    });
})

回复收藏 0 原文

~没有更多了~