Memuat file GeoJSON eksternal ke peta Leaflet?

54

Saya ingin memuat file geoJSON (poligon) ke peta leaflet saya. Saya telah melihat contoh di mana geoJSON tertanam ke dalam kode javascript tetapi saya tidak dapat menemukan contoh yang menunjukkan bagaimana hal itu dilakukan dengan file eksternal.

<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 kebun istana
sumber
seret dan lepas geojson ke geojson.io
Mapperz
@Mapperz OP tidak bertanya tentang cara menempelkan isi konten geojson mereka ke dalam skrip.
Dave-Evans

Jawaban:

37

Lihatlah ke Leaflet-Ajax. Ini merampingkan segalanya. Akan memberikan suara untuk Neogeomat untuk menyebutkannya.

Dapatkan skrip di sini ( github repo ) dan tambahkan ke tajuk Anda:

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

Maka itu masalah mengunggah dengan nama file.

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

Perbaikan yang benar-benar lurus ke depan dan berfungsi. Jadi yay

FredFury
sumber
26

Anda dapat menggunakan jquery Ajax untuk memuat data dan kemudian menambahkannya.

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

atau Anda dapat menggunakan plugin leaflet-ajax

neogeomat
sumber
14

Inilah solusi minimum vanilla js saya. Lihat ma, tidak diperlukan jquery untuk panggilan ajax cepat ke 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
sumber
Terima kasih untuk contohnya - Saya mengeluarkan newkata kunci untuk geoJSONfungsi pabrik, tetapi mendapat kesalahan CORS dengan garis setRequestHeader di sana, jadi hapus dan berfungsi dengan baik (harus ada pengaturan di server saya).
Brian Burns
Memberi saya XML Parsing Error: not well-formedkesalahan di Line Number 1, Column 1:. Ya, karena datanya adalah geojson, mengapa ia mencoba menguraikannya sebagai XML? Saya tidak mengerti masalahnya, tetapi saya ingin mengimpor data saya tanpa Ajax.
Aaron Bramson
@AaronBramson coba lagi. Ini sedikit kode lama yang saya lakukan. Saya harus mengatur responseType dan menggunakan respon tidak mem-parsing responseText. Baru saja memperbarui cuplikan kode.
Dennis Bauszus
Ya, ini luar biasa! Ini bekerja di luar kotak tanpa memerlukan paket eksternal tambahan dan tanpa perlu mengedit file data. Ini jelas jawaban terbaik.
Aaron Bramson
11

Di elemen kepala, Anda mereferensikan file Anda:

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

Dan kemudian di dalam tubuh:

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

Anda tidak perlu "menempatkan" mereka di grup layer ...

fgcartographix
sumber
sempurna! inilah yang saya cari!
bailey
1
menggunakan pengembang web Firebug untuk firefox saya mendapatkan "ReferenceError: usStates tidak didefinisikan" "(L.geoJson (usStates) .addTo (peta);" Saya mereferensikan file seperti yang Anda perlihatkan <script src="usStates.geojson" type="text/javascript"></script>dan ditambahkan L.geoJson(usStates).addTo(map);ke bagian bawah kode saya. ide?
bailey
Pasti ada sesuatu dengan src ...
Milik
1
tidak ada variabel yang diperlukan untuk referensi? apakah penting bahwa ekstensi file saya .json bukan .geojson?
bailey
2
Ini adalah jawaban yang membingungkan, karena mengharuskan Anda untuk menentukan variabel hydro_s, hydro_l dalam file data Anda, yang secara teknis akan membuat GeoJSON bahkan tidak valid! Lihat jawaban lain untuk info lebih lanjut ...
Florian Ledermann