導入GeoJSON的數據單張地圖從立交橋渦輪origanated

我不是以英語爲母語，所以請不要介意犯錯誤;）導入GeoJSON的數據單張地圖從立交橋渦輪origanated

我想打一個地圖，你可以找到農家店和牛奶自動售貨機爲那些想要支持當地農民的人提供機器。我發現這些東西可以在標籤shop=farm和amenity=vending_machine selling:milk的OSM數據中找到。有了這些信息，您可以輕鬆地在http://overpass-turbo.eu上創建查詢並將其導出爲JSON文件。我使用「osmtogeojson」將此數據轉換爲GeoJSON，並在我的主文件夾中存儲了一個小測試樣本「test.geojson」。我也下載leaflet.ajax.min.js並把它放在我的主文件夾。現在我想將這個本地GeoJSON文件導入到Leaflet地圖中。因此，這裏是我的情況：

我的頭區域看起來是這樣的：（幾乎一切從教程上leafletjs.com和堆棧溢出複印件）

<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /> 
<script src="/leaflet.ajax.min.js"></script> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/> 
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>

的，這是（的重要組成部分）JavaScript的：

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

編輯：這裏是現場演示：https://stefang.cepheus.uberspace.de/farmshops/ 你可以找到我的/test.geojson文件有太多。

有人知道這裏出了什麼問題嗎？

少重要JS部分（從意見進口代OP的）：

var mymap = L.map('mapid').setView([49.013, 8.40], 10); 
L.tileLayer('api.tiles.mapbox.com/v4{id}/{z}/{x}/{y}.png?acc‌ess_token=<TOKEN>', { 
    maxZoom: 18, 
    attribution: 'Map data &copy; <a href="openstreetmap.org">OpenStreetMap</a>; contributors, ' + '<a href="creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</…;, ' + 'Imagery © <a href="mapbox.com">Mapbox</a>';, 
    id: 'mapbox.streets' 
}).addTo(mymap);

來源

2017-05-12 Stefan

歡迎來到SO！當你說「沒有錯誤」時，你的意思是你檢查了你的瀏覽器控制檯嗎？你的腳本加載順序很奇怪。 – ghybs

謝謝，這很有幫助。我必須說不，我沒有。我認爲每個錯誤都會導致錯誤對話框。但瀏覽器控制檯幫助了我很多，我想我必須首先使用這個對象。錯誤是： TypeError：geojsonLayer未定義 – Stefan

我承認我之前會預料到另一個錯誤：「L未定義」或類似的東西，因爲在Leaflet之前加載Leaflet.ajax插件？ – ghybs

1）您沒有預期的L is not defined錯誤，因爲你<script> src屬性是錯誤的（你的額外斜線/使瀏覽器嘗試訪問文件https://stefang.cepheus.uberspace.de/leaflet.ajax.min.js，而它被放置在https://stefang.cepheus.uberspace.de/farmshops/leaflet.ajax.min.js）

2）一旦此更正，L is not defined錯誤正確顯示。您必須將<script>標籤放置在之後的Leaflet-ajax插件之後。

3）TypeError: geojsonLayer is undefined錯誤是由於您的線路geojsonLayer.addTo(map)前var geojsonLayer = new L.GeoJSON.AJAX("test.geojson")被實際放入你必須把它變量賦值後。

一旦這3個錯誤得到糾正，您的GeoJSON文件似乎被導入並呈現正確。

演示：https://plnkr.co/edit/OwyfvvoaseLhhCyleN4n?p=preview

來源

2017-05-15 17:31:35 ghybs

非常感謝你，這是一個很好的答案，解決了我所有的問題！偉大的工作和一個偉大的基礎，進一步深入到這個主題:) – Stefan

Yw。請注意，SO感謝人的方式也是爲了接受答案。一旦你有更多的_reputation_，你也可以_up/down-vote_。 – ghybs

導入GeoJSON的數據單張地圖從立交橋渦輪origanated

回答

相關問題