Как сохранить всплывающий текст открытым после setInterval в Leaflet? - PullRequest
Новая
       8

Как сохранить всплывающий текст открытым после setInterval в Leaflet?

0 голосов
/ 29 марта 2020

ОПИСАНИЕ : я написал Javascript код (я только начал), который запрашивает Opensky REST API каждые 10 секунд. После того как я соберу данные, я нанесу их на карту Leaflet. js. Для каждого элемента я добавляю всплывающее текстовое поле, которое открывается, когда я нажимаю на подсказку. Пока код работает отлично! Вот код, с которым вы можете поиграть: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=\, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="crossorigin=""/>
        <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
            integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
            crossorigin="">
        </script>
        <style>
            #openskyMap { 
                height: 800px; 
                width:1200px;
            }
        </style>
        <title>
            "FETCH JSON from API and map lat lon"
        </title>
    </head>
    <body>

        <h1>Where are the flights</h1>
        <p>Last Update (UNIX time): <span id="ts"></span></p>

        <div id="openskyMap"></div>

        /*                           JAVASCRIPT CODE BEGINS HERE                             */ 
        <script>

            /* DEFINE OPENSKY API URL */
            var opensky_url = "https://opensky-network.org/api/states/all?time=TIME";

            /* INITIATE LEAFLET MAP */
            const mymap = L.map('openskyMap').setView([45, 0], 3);
            const attribution = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreatMap</a> contributors'
            const tileUrl = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
            const tiles = L.tileLayer(tileUrl, {attribution});
            var layerGroup = L.layerGroup().addTo(mymap);
            tiles.addTo(mymap);

            /* CHANGE ICON SIZE BASED ON ZOOM */
            mymap.on('zoomend', function(e) {
                var currentZoom = mymap.getZoom();
                console.log("Current Zoom" + " " + currentZoom);
                if (currentZoom >= 10) {
                damsRadius = 100;
                } else {
                damsRadius = 20000;
                }
            });

            /* FUNCTION TO GET THE ICAO24 CODE. I CANNOT GET IT OUT OF HERE THOUGH! */
            function getIcao24(e) {
                var popup = e.target.getPopup();
                var content = popup.getContent();
                console.log(content)
                return content
            }

            /* INITIATE QUERY FUNCTION */
            async function getOpensky() {

                /* CALCULATE UNIX TIME TO BE PASSED TO THE URL */
                var ts = Math.round((new Date()).getTime() / 1000);
                ts = ts.toString();

                /* MAKE QUERY TO OPENSKY URL */
                const  response = await fetch(opensky_url.replace('TIME',ts));
                const data = await response.json();

                /* PLOT ITEMS TO MAP USING LEAFLET:js */
                layerGroup.clearLayers();
                for (var key in data.states) {

                    /* GET SINGLE ITEM FROM JSON */
                    const item = data.states[key];

                    try{ 

                       /* GET GEOGRAPHICAL COORDINATES*/
                        const lon = item[5];
                        const lat = item[6];

                        /* DEFINE POPUP TEXT TO BE DISPLAYED*/
                        const popupText = "<p>"+item[0] + " - " + item[1] + "<br/>Lat: " + lat.toFixed(2)+" / Lon: "+lon.toFixed(2)+"<br/>Epoch: "+ts+"</p>";

                        /* ADD ITEM TO THE MAP. CALL getICAO24 FUNCTION BUT I DON'T KNOW HOW TO SAVE THE OUTPUT*/
                        L.circle(L.latLng(
                            parseFloat(item[6]), // lon
                            parseFloat(item[5])  // lat
                        ), damsRadius).addTo(layerGroup).bindPopup(popupText).on('click', getIcao24);

                        document.getElementById('ts').textContent = ts;
                    }
                    catch (e) {}
                }               

            }
            /* CALL FUNCTION FIRST TIME*/
            getOpensky();

            /* UPDATE FUNCTION EVERY 10 SECONDS */
            setInterval(getOpensky, 10000);

        </script>
    </body>
</html>

ПРОБЛЕМА : каждый раз, когда я нажимаю на самолет ( item ), всплывающее окно открывается, как и ожидалось , Однако я хотел бы оставить выбранный всплывающий текст открытым даже после того, как произойдет refre sh ( setInterval каждые 10 секунд). Этого не происходит из-за того, что когда я нажимаю на всплывающую подсказку, выходные данные отображаются только на консоли, но не сохраняются в каком-либо месте, чтобы их можно было как-то распознать при следующем запросе.

МОЙ ТЕНТАТИВ : Я думаю, что одним из возможных решений является добавление функции с именем getIcao24 , которая должна возвращать всплывающий текст и получать уникальный код icao24 ( item [0] ) из строки, а затем проверьте, появится ли она в следующей итерации, и установите всплывающее окно как открытое. Однако я понятия не имею, как получить такую ​​информацию из функции.

ВОПРОС : Сможете ли вы предложить разумный и элегантный способ достижения моей цели? то есть оставить всплывающее окно с выбранным элементом открытым даже после того, как произошла ссылка sh?

...