Caricamento file GeoJSON esterno nella mappa Leaflet?

54

Vorrei caricare un file geoJSON (poligono) nella mia mappa del volantino. Ho visto esempi in cui geoJSON è incorporato nel codice JavaScript ma non riesco a trovare alcun esempio che mostri come viene fatto con un file esterno.

<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 
— bastione
fonte
trascina e rilascia il geojson su geojson.io
— Mapperz
@Mapperz l'OP non chiedeva come incollare i contenuti dei loro contenuti geojson nello script.
— Dave-Evans,

Risposte:

37

Guarda in Leaflet-Ajax. Semplifica tutto. Rinuncerà al voto di Neogeomat per averlo menzionato.

Prendi lo script qui ( repository github ) e aggiungilo alla tua intestazione:

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

Quindi si tratta di caricare con il nome del file.

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

Correzione davvero semplice e funziona. Quindi yay

— FredFury
fonte
26

È possibile utilizzare jquery Ajax per caricare i dati e quindi aggiungerli.

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

oppure Puoi usare il plugin leaflet-ajax

— neogeomat
fonte
14

Ecco la mia soluzione js minima alla vaniglia. Guarda, non è necessario jquery per una rapida chiamata ajax a un file.

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
fonte
Grazie per l'esempio: ho tolto la newparola chiave per la geoJSONfunzione factory, ma ho riscontrato un errore CORS con la riga setRequestHeader, quindi l'ho rimosso e ha funzionato bene (deve essere un'impostazione nel mio server).
— Brian Burns,
Mi dà un XML Parsing Error: not well-formederrore a Line Number 1, Column 1:. Bene, poiché i dati sono geojson, perché sta cercando di analizzarli come XML? Non capisco il problema, ma vorrei importare i miei dati senza Ajax.
— Aaron Bramson il
@AaronBramson ha un altro tentativo. Questo è stato un po 'di vecchio codice che ho fatto. Avrei dovuto impostare responseType e utilizzare la risposta per non analizzare responseText. Ho appena aggiornato lo snippet di codice.
— Dennis Bauszus,
Sì, è fantastico! Funziona immediatamente senza richiedere ulteriori pacchetti esterni e senza modificare il file di dati. Questa è chiaramente la risposta migliore.
— Aaron Bramson,
11

Nell'elemento head, fai riferimento ai tuoi file:

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

E poi nel corpo:

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

Non devi "metterli" in un gruppo di livelli ...

— fgcartographix
fonte
Perfetto! questo è quello che stavo cercando!
— Bailey,
1
usando lo sviluppatore web Firebug per Firefox sto ottenendo "ReferenceError: usStates non è definito" "(L.geoJson (usStates) .addTo (mappa);" Ho fatto riferimento al file come mostrato <script src="usStates.geojson" type="text/javascript"></script>e aggiunto L.geoJson(usStates).addTo(map);in fondo al mio codice. idee?
— bailey
Deve essere qualcosa con src ... Il mio è in testa al documento (ho modificato la mia risposta per aggiungerlo completamente)
— fgcartographix
1
nessuna variabile è necessaria per il riferimento? importa che la mia estensione sia .json anziché .geojson?
— Bailey,
2
Questa è una risposta confusa, poiché richiede di definire le variabili hydro_s, hydro_l nel file di dati, che tecnicamente renderebbe GeoJSON anche non valido! Vedi le altre risposte per maggiori informazioni ...
— Florian Ledermann,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.