Ładowanie zewnętrznego pliku GeoJSON do mapy ulotki?

53

Chciałbym załadować plik geoJSON (wielokąt) do mojej mapy ulotki. Widziałem przykłady, w których geoJSON jest osadzony w kodzie javascript, ale nie mogę znaleźć żadnych przykładów pokazujących, jak to się robi z zewnętrznym plikiem.

<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 Bailey
źródło
przeciągnij i upuść geojson na geojson.io
Mapperz
@Mapperz OP nie pytał o to, jak wkleić zawartość ich zawartości geojson do skryptu.
Dave-Evans,

Odpowiedzi:

36

Zajrzyj do Leaflet-Ajax. Usprawnia wszystko. Odda głos za Neogeomat za wzmiankę o nim.

Pobierz skrypt tutaj ( repozytorium github ) i dodaj go do nagłówka:

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

Następnie należy przesłać nazwę pliku.

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

Naprawdę prosta naprawa i działa. Więc tak.

FredFury
źródło
26

Możesz użyć jQuery Ajax, aby załadować dane, a następnie je dodać.

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() {});

lub Możesz użyć wtyczki leaflet-ajax

neogeomat
źródło
14

Oto moje minimalne rozwiązanie waniliowego js. Spójrz, nie potrzeba jquery do szybkiego wywołania ajax do pliku.

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();
Dennis Bauszus
źródło
Dzięki za przykład - wyjąłem newsłowo kluczowe dla geoJSONfunkcji fabrycznej, ale dostałem błąd CORS z linią setRequestHeader, więc usunąłem go i działało dobrze (musi być jakieś ustawienie na moim serwerze).
Brian Burns,
Daje mi XML Parsing Error: not well-formedbłąd o Line Number 1, Column 1:. Skoro dane są geojsonem, dlaczego próbuje je parsować jako XML? Nie rozumiem problemu, ale chciałbym zaimportować moje dane bez Ajaxa.
Aaron Bramson,
@AaronBramson ma kolejną próbę. To był całkiem stary bit kodu, który zrobiłem. Powinienem był ustawić typ odpowiedzi i użyć odpowiedzi, a nie parsować tekstu odpowiedzi. Właśnie zaktualizowałem fragment kodu.
Dennis Bauszus,
Tak, to wspaniale! Działa od razu po wyjęciu z pudełka, bez dodatkowych pakietów zewnętrznych i bez edycji pliku danych. To jest zdecydowanie najlepsza odpowiedź.
Aaron Bramson,
11

W elemencie head odwołujesz się do swoich plików:

    <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>

A potem w ciele:

<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>

Nie musisz „umieszczać” ich w grupie warstw ...

fgcartographix
źródło
doskonały! tego szukałem!
bailey,
1
Używając programisty internetowego Firebug dla Firefoksa, otrzymuję komunikat „ReferenceError: usStates nie jest zdefiniowany” ”(L.geoJson (usStates) .addTo (mapa);” Odwołałem się do pliku tak, jak pokazałeś, <script src="usStates.geojson" type="text/javascript"></script>i dodałem L.geoJson(usStates).addTo(map);go na dole mojego kodu. pomysły?
bailey,
To musi być coś z src ... Mój jest w nagłówku dokumentu (zredagowałem swoją odpowiedź, aby dodać ją całkowicie)
fgcartographix
1
żadna zmienna nie jest potrzebna do odniesienia? czy to ważne, że moje rozszerzenie pliku to .json zamiast .geojson?
bailey,
2
To myląca odpowiedź, ponieważ wymaga zdefiniowania zmiennych hydro_s, hydro_l w pliku danych, co technicznie sprawiłoby, że nawet niepoprawny GeoJSON! Zobacz inne odpowiedzi, aby uzyskać więcej informacji ...
Florian Ledermann