Завантаження зовнішнього файлу GeoJSON на карту Leaflet?

54

Я хотів би завантажити файл geoJSON (полігон) у свою листівку. Я бачив приклади, коли geoJSON вбудовується у код JavaScript, але я не можу знайти жодного прикладу, який би показав, як це робиться із зовнішнім файлом.

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
    <script src="usStates.geojson" type="text/javascript"></script>
    <style>
        html, body, #map {
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div id="map" style="height: 100%"</div>
    <script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
    <script src="http://cdn.leafletjs.com/leaflet-0.5/leaflet.js"></script>

    <script type="text/javascript"> 

    var map = L.map('map').setView([38.57, -94.71], 4);

    L.tileLayer('http://{s}.tile.cloudmade.com/9067860284bc491e92d2342cc51d47d9/998/256/{z}/{x}/{y}.png', {attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> Imagery © <a href="http://cloudmade.com">CloudMade</a>'}).addTo(map);

    var featureStyle = {
        "color": "#ff7800",
        "weight": 5, 
        "opacity": 0.2
    };

    L.geoJson(usStates).addTo(map);

    </script>

</body>

leaflet geojson

— бейлі
джерело

перетягніть geojson на geojson.io

— Mapperz

@Mapperz ОП не запитував про те, як вставити вміст вмісту їх geojson у сценарій.

— Дейв-Еванс

37

Погляньте на Leaflet-Ajax. Це впорядковує все. Відмовиться від голосування за Неогеомат за його згадування.

Отримайте скрипт тут ( github repo ) та додайте його до свого заголовка:

<script src="/js/leaflet-0.7.2/leaflet.ajax.min.js"></script>

Тоді мова йде про завантаження з назвою файлу.

var geojsonLayer = new L.GeoJSON.AJAX("foo.geojson");       
geojsonLayer.addTo(map);

Дійсно прямо виправити вперед, і це працює. Так що так.

— FredFury
джерело

26

Ви можете використовувати jquery Ajax для завантаження даних, а потім додавати їх.

var district_boundary = new L.geoJson();
district_boundary.addTo(map);

$.ajax({
dataType: "json",
url: "data/district.geojson",
success: function(data) {
    $(data.features).each(function(key, data) {
        district_boundary.addData(data);
    });
}
}).error(function() {});

або Ви можете використовувати плагін leaflet-ajax

— неогеомат
джерело

14

Ось мій мінімальний розчин ванілі js. Дивись ма, жоден jquery не потрібен для швидкого виклику ajax до файлу.

let xhr = new XMLHttpRequest();
xhr.open('GET', 'uk_outline.geojson');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'json';
xhr.onload = function() {
    if (xhr.status !== 200) return
    L.geoJSON(xhr.response).addTo(map);
};
xhr.send();

— Денніс Бауш
джерело

Дякую за приклад - я вийняв newключове слово для geoJSONзаводської функції, але отримав помилку CORS з рядком setRequestHeader там, тому видалив його і він працював чудово (повинен бути якийсь параметр на моєму сервері).

— Брайан Бернс

Повідомляє мене про XML Parsing Error: not well-formedпомилку на Line Number 1, Column 1:. Отже, оскільки дані - це геойсон, чому він намагається розібрати їх як XML? Я не розумію проблеми, але я хотів би імпортувати свої дані без Ajax.

— Аарон Брамсон

@AaronBramson ще одну спробу. Це був досить старий біт коду, який я зробив. Я повинен був встановити тип ResponseType і використовувати відповідь, щоб не проаналізувати responseText. Щойно оновлений фрагмент коду.

— Денніс Бауш

Так, це чудово! Він працює з вікна, не вимагаючи додаткових зовнішніх пакетів і не вимагаючи редагування файлу даних. Це, очевидно, найкраща відповідь.

— Аарон Брамсон

11

У головному елементі ви посилаєтесь на свої файли:

    <link rel="stylesheet" type="text/css" href="leaflet/leaflet.css" />
    <!--[if lte IE 8]>
        <link rel="stylesheet" type="text/css" href="css/leaflet.ie.css" />
    <![endif]-->
    <script src="leaflet/leaflet.js"></script>
    <script src="hydro_s.geojson" type="text/javascript"></script>
    <script src="hydro_l.geojson" type="text/javascript"></script>
    <style>
        html, body, #map {
            height: 100%;
        }
        body {
            padding: 0;
            margin: 0;
        }
    </style>
    <title>Leaflet Map with GeoJson</title>
 </head>

А потім в організмі:

<body>
    <div id="map"></div>
    <script type="text/javascript">

        var map = L.map('map', {
            center: [45.57, -73.5648],
            zoom: 10
        });

         /* Hydro */
        var hydro = new L.LayerGroup();
        L.geoJson(hydro_s, {style: hydrosStyle}).addTo(hydro);
        L.geoJson(hydro_l, {style: hydrolStyle}).addTo(hydro);

    </script>
</body>

Не потрібно "класти" їх у групу шарів ...

— fgcartographix
джерело

ідеально! це те, що я шукав!

— bailey

1

використовуючи веб-розробник Firebug для firefox, я отримую "ReferenceError: usStates не визначено" "(L.geoJson (usStates) .addTo (map);" Я вказав на файл, як ви показали, <script src="usStates.geojson" type="text/javascript"></script>і додав L.geoJson(usStates).addTo(map);до нижньої частини мого коду. ідеї?

— bailey

Має бути щось із src ... У мене в голові документа (я відредагував свою відповідь, щоб додати його повністю)

— fgcartographix

1

не потрібна змінна для посилання? чи має значення те, що моє розширення файлу .json замість .geojson?

— Бейлі

2

Це заплутана відповідь, оскільки вимагає від вас визначити змінні hydro_s, hydro_l у вашому файлі даних, що технічно зробить навіть недійсним GeoJSON! Дивіться інші відповіді для отримання додаткової інформації ...

— Флоріан Ледерманн

10

після додавання var usStates =до вершини мого файлу geojson код працював.

— бейлі
джерело

5

Ця стаття пояснює ще один хороший підхід lyzidiamond.com/posts/osgeo-august-meeting

— Джон Гравуа

Wayback Machine копіює вищезгадану статтю , оскільки оригінал піддався linkrot, і ми не можемо редагувати коментарі інших.

— Альберт