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>

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


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


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

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


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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.