Как получить внешний URL JSON в Leaflet JS - PullRequest
Новая
       15

Как получить внешний URL JSON в Leaflet JS

0 голосов
/ 05 июля 2019

У меня проблема с получением файла JSON внешнего URL-адреса в моей карте JS Leaflet. Когда я пытаюсь использовать локальный файл JSON, он может работать как обычно, но когда я переключаюсь на внешний URL-адрес с удаленного сервера, он не появляется. 

<body>

    <div id="mapRain" style="height: 95vh;"></div>
    <script>
        var map = L.map('mapRain').setView([-1.4043771, 113.7221155], 7);
        var imageBounds = [
            [-5.247572, 110.593051],
            [-9.563244, 114.948288]
        ];
        var image = null;
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZGV4dmlscyIsImEiOiJjanhvczU0MnQwYTR2M21vMTJ3MW5kYnRnIn0.9P2ISjrCdk7JLPt72aQQWA', {
            maxZoom: 18,
            attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> | © <a href="http://stamet.tjilikriwut.bmkg.go.id/">BMKG Palangka Raya</a>',
            id: 'mapbox.streets'
        }).addTo(map);

        var planeIcon = L.icon({
            iconUrl: 'img/plane.png',

            iconSize: [60, 80],
            iconAnchor: [30, 80],
        });
        $(function() {
            $(document).ready(function() {
                $.ajax({
                    url: "data/aviation.json",
                    dataType: "JSON",
                    type: "GET",
                    success: function(result) {
                        var report = result.report;
                        for (i = 0; i < report.length; i++) {
                            var popup = '<strong>' + report[i].icao_id + ' ' + report[i].station_name + '</strong><br>' + report[i].observed_time + ' ' + report[i].time_zone + '<br><img src="img/symbols/' + report[i].symbol + '.png"><br><strong>Cuaca : ' + report[i].weather + '</strong><br><br><strong>Angin</strong><br>Arah (dari) : ' + report[i].wind_direction + '<br>Kecepatan (km/h): ' + report[i].wind_speed + '<br><strong>Jarak penglihatan (km)</strong> : ' + report[i].visibility + '<br><strong>Suhu (°C)</strong> : ' + report[i].temp + '<br><strong>Titik Embun (°C)</strong> : ' + report[i].dew_point + '<br><strong>Tekanan (hPa)</strong> : ' + report[i].pressure;
                            L.marker([report[i].latitude, report[i].longitude], {
                                icon: planeIcon
                            }).addTo(map).bindPopup(popup);
                        }
                    }
                });

            });
        });
    </script>

</body>

Когда я пытаюсь изменить внешний URL, данные не отображаются 

$.ajax({
url: "https://juanda.jatim.bmkg.go.id/webkantor/data/aviation.json",
dataType: "JSON",

1 Ответ

1 голос
/ 05 июля 2019

Добро пожаловать в Stakoverflow Desnug.

Использование удаленного адреса не работает из-за ограничения политики CORS. Если вы посмотрите на консоль, то увидите ошибку типа Access ... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource или Cross-Origin Read Blocking (CORB) blocked cross-origin response.... Вы можете узнать больше о CORS здесь .

Это не проблема вашего скрипта или вашего браузера, это мера безопасности, которую браузеры должны избегать, чтобы веб-сайт / веб-приложение использовали несанкционированные ресурсы других удаленных веб-сайтов.

Только веб-мастер или администратор сервера этого веб-сайта могут разрешить доступ к ресурсам в режиме общего доступа к ресурсам.

Если я понимаю вашу ситуацию, вам нужно полагаться на обновленные данные с этого сайта. Единственный способ сделать это - установить серверный скрипт (например, с PHP), который загружает этот удаленный json. Затем вы можете выбрать, хотите ли вы настроить его на выполнение каждый раз (cronjob) или кодировать его как «промежуточный сервис» (например, ваш скрипт jQuery вызывает aviation.php, который загружает и обслуживает удаленный json).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...