JavaScript просто не будет l oop через объект (geo json) в скрипте, но делает это в консоли, даже если объект загружен - PullRequest
Новая
       37

JavaScript просто не будет l oop через объект (geo json) в скрипте, но делает это в консоли, даже если объект загружен

0 голосов
/ 24 января 2020

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

Это очень своеобразное поведение с данными, которые у меня есть, потому что Chrome и Firefox работают немного по-разному.

Когда я загружаю файл geo json из вызова ajax, key начинается с, казалось бы, случайных значений - в Chrome он начинается с 56, а в Firefox он начинается с 81. Кроме того, я могу l oop просмотреть данные, когда копирую, вставить в консоль конкретный l oop, и он извлекает latitude и longitude, но он просто не работает вообще в самом скрипте.

Что действительно происходит в файле index , так это то, что я загружаю geo json из файла. Затем, чтобы создать ломаную линию или строку строки , я перебираю geo json, чтобы извлечь latitude и longitude и pu sh их в массив, который затем передается в внутренняя polyline функция листовка для соединения всех точек путем рисования линии.

токовый выход 

inside the function 
PathCoords = 
Over

И мы не видим подключенных точек по линиям на карте.

Ожидаемый вывод 

Array [ 80.14653749, 13.03620529 ]
Array [ 80.1465604, 13.03633957 ]
Array [ 80.14625642, 13.03650074 ]
Array [ 80.14640196, 13.03667878 ]
Array [ 80.1465044, 13.0368217 ]
Array [ 80.14660705, 13.03689514 ]
Array [ 80.1465697, 13.03702323 ]
Array [ 80.14660424, 13.03724193 ]
Array [ 80.14647597, 13.03741167 ]
Array [ 80.14645969, 13.03757399 ]
Array [ 80.14642552, 13.03775751 ]
Array [ 80.14646913, 13.03794248 ]
Array [ 80.14653564, 13.03804439 ]
Array [ 80.14655821, 13.03819883 ]
Array [ 80.14655482, 13.03835368 ]
Array [ 80.14649189, 13.03849665 ]
Array [ 80.14649999, 13.03862578 ]
Array [ 80.14653824, 13.03876863 ]

При выполнении следующих действий в консоли показано: 

for (const [key, value] of Object.entries(check._layers)){
    var x = value._latlng.lng;
    var y = value._latlng.lat;
    console.log([x, y]);
}

Очистить index.html (получить geo json файл из репо ) - 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <style>
        html,
        body,
        #map {
            height: 100%;
        }

        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map"></div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-ajax/2.1.0/leaflet.ajax.min.js"></script>
    <script type="text/javascript">

        var map = L.map('map').setView([13.03, 80.16], 15);

        L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
            maxZoom: 20,
            attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
                'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
            id: 'mapbox/light-v9'
        }).addTo(map);

        var geojsonLayer = new L.GeoJSON.AJAX("gps-logger-android-data.geojson");
        geojsonLayer.addTo(map);

        var check;

        function connectDots(data) {
            console.log("inside the function");

            check = data;
            var c = [];
            for (const [key, value] of Object.entries(check._layers)) {
                console.log("Key = " + key, "--", "Value = " + value);
                var x = value._latlng.lng;
                var y = value._latlng.lat;
                c.push([x, y]);
            }
            return c;
        }
        pathCoords = connectDots(geojsonLayer);
        console.log("PathCoords = " + pathCoords);
        L.polyline(pathCoords).addTo(map);
        console.log("Over");
    </script>

</body>

ПРИМЕЧАНИЕ:
Клонируйте репо , затем используйте python3 -m http.server для визуализации index.html, в противном случае вы получите ошибку CORS при загрузке geo json, используя ajax.

PS Если вы могли бы объяснить, почему ключи разные в Chrome и Firefox это было бы здорово.

...