Harici GeoJSON dosyasını Leaflet haritasına mı yüklüyorsunuz?

53

Broşür haritama bir geoJSON (poligon) dosyası yüklemek istiyorum. GeoJSON'un javascript koduna gömülü olduğu örnekleri gördüm ancak harici bir dosya ile nasıl yapıldığını gösteren hiçbir örnek bulamıyorum.

<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 
— şatonun dış avlusu
kaynak
sürükle ve üzerine GeoJSON'a damla geojson.io
— Mapperz
@Mapperz OP, geojson içeriğinin içeriğini komut dosyasına nasıl yapıştıracağını sormuyordu.
— Dave-Evans

Yanıtlar:

36

Leaflet-Ajax'a bakın. Her şeyi düzene sokar. Neogeomat'a bundan bahsettiği için oy verecek.

Komut dosyasını buraya ( github repo ) alın ve başlığınıza ekleyin:

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

O zaman bu dosya adıyla yükleme yapmaktan ibarettir.

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

Gerçekten düz ileri düzeltme ve işe yarıyor. Öyleyse yay.

— FredFury
kaynak
26

Veri yüklemek ve sonra eklemek için jquery Ajax kullanabilirsiniz.

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

veya Broşür-ajax eklentisini kullanabilirsiniz

— neogeomat
kaynak
14

İşte minimum vanilya js çözümüm. Bak ma, bir dosyaya hızlı bir ajax araması yapmak için jquery gerekmez.

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
kaynak
Örnek için teşekkürler - Fabrika işlevinin newanahtar sözcüğünü çıkardım geoJSON, ancak setRequestHeader satırında CORS hatası oluştu, kaldırıldı ve düzgün çalıştı (sunucumda bir ayar olmalı).
— Brian Burns,
Bana bir XML Parsing Error: not well-formedhata veriyor Line Number 1, Column 1:. Peki, veriler bir geojson olduğundan, neden onu XML olarak ayrıştırmaya çalışıyor? Sorunu anlamadım, ancak verilerimi Ajax olmadan almak istiyorum.
— Aaron Bramson,
@AaronBramson başka bir deneyin. Bu yaptığım oldukça eski bir kod biti. ResponseType'ı ayarlamalıydım ve yanıtı, ResponseText öğesini ayrıştırmayacak şekilde kullanmalıydım. Kod pasajı az önce güncellendi.
— Dennis Bauszus
Evet, bu harika! Herhangi bir ekstra harici paket gerektirmeden ve veri dosyasını düzenlemeye gerek kalmadan kutunun dışında çalışır. Bu açıkça en iyi cevap.
— Aaron Bramson
11

Başlık öğesinde dosyalarınıza başvuru yaparsınız:

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

Ve sonra vücutta:

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

Onları katman grubuna "koymak" zorunda değilsiniz ...

— fgcartographix
kaynak
mükemmel! aradığım şey buydu!
— bailey,
1
Firebug web geliştiricisini firefox için kullanıyorum "ReferenceError: usStates tanımlanmadı" "(L.geoJson (usStates) .addTo (harita);" Gösterdiğim ve kodumun altına <script src="usStates.geojson" type="text/javascript"></script>eklediğiniz dosyaya başvurdum) L.geoJson(usStates).addTo(map);fikirler?
— bailey
Src ile ilgili bir şey olmalı ... Mine belgenin başında yer alıyor (Tamamen eklemek için cevabımı düzenledim)
— fgcartographix
1
başvuru için değişken gerekmiyor mu? dosya uzantımın .geojson yerine .json olması önemli mi?
— bailey,
2
Bu, kafa karıştırıcı bir cevaptır, çünkü veri dosyanızda hydro_s, hydro_l değişkenlerini tanımlamanızı gerektirir; bu da teknik olarak geçersiz GeoJSON! Daha fazla bilgi için diğer cevaplara bakın ...
— Florian Ledermann
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.