[英]Import geojson data to a leaflet map origanated from overpass turbo
I am not a native English speaker so please don't mind the mistakes ;) 我不是英语母语人士,所以请不要介意错误;)
I want to make a map where you can find farm shops and milk vending machines for people that want to support their local farmers. 我想制作一张地图,在这里可以找到想要支持当地农民的人们的农场商店和自动贩卖机。 I found out that these things can be found in the OSM data with the tags
shop=farm
and amenity=vending_machine selling:milk
. 我发现可以在OSM数据中找到这些东西,它们的标签为
shop=farm
和amenity=vending_machine selling:milk
。 With that information you can easily crate a query on http://overpass-turbo.eu and export it as a JSON file. 有了这些信息,您可以轻松地在http://overpass-turbo.eu上创建查询并将其导出为JSON文件。 I used "osmtogeojson" to convert this Data to GeoJSON and stored a small test sample as "test.geojson" in my main folder.
我使用“ osmtogeojson”将此数据转换为GeoJSON并将一个小的测试示例存储为“ test.geojson”在我的主文件夹中。 I also downloaded
leaflet.ajax.min.js
and put it in my main folder. 我还下载了
leaflet.ajax.min.js
并将其放在我的主文件夹中。 Now I want to import this local GeoJSON file into a Leaflet map. 现在,我想将此本地GeoJSON文件导入Leaflet地图。 So here is my situation:
所以这是我的情况:
My head area looks like this: (pretty much everything is a copy from the tutorials on leafletjs.com and Stack Overflow) 我的脑袋看起来像这样:(几乎所有内容都是来自leafletjs.com和Stack Overflow上的教程的副本)
<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/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js" integrity="sha512-A7vV8IFfih/D732iSSKi20u/ooOfj/AGehOKq0f4vLT1Zr2Y+RX7C+w8A1gaSasGtRUZpF/NZgzSAu4/Gc41Lg==" crossorigin=""></script>
An this is (the important part of) the JavaScript: 这是JavaScript的(重要部分):
var geojsonLayer = new L.GeoJSON.AJAX("test.geojson");
geojsonLayer.addTo(map);
EDIT:Here is a live demo: https://stefang.cepheus.uberspace.de/farmshops/ you can find my /test.geojson file there too. 编辑:这是一个现场演示: https ://stefang.cepheus.uberspace.de/farmshops/您也可以在这里找到我的/test.geojson文件。
Does anyone know what went wrong here? 有人知道这里出了什么问题吗?
Less important JS part (imported from comments on behalf of OP): 不太重要的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?access_token=<TOKEN>', {
maxZoom: 18,
attribution: 'Map data © <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);
1) You do not have the expected L is not defined
error because your <script>
src attribute is erroneous (your extra leading slash /
makes the browser try to access the file at https://stefang.cepheus.uberspace.de/leaflet.ajax.min.js
, whereas it is placed at https://stefang.cepheus.uberspace.de/farmshops/leaflet.ajax.min.js
) 1)您没有预期的
L is not defined
错误,因为您的<script>
src属性是错误的(您的额外前导斜杠/
使浏览器尝试访问位于https://stefang.cepheus.uberspace.de/leaflet.ajax.min.js
的文件https://stefang.cepheus.uberspace.de/leaflet.ajax.min.js
,而它放在https://stefang.cepheus.uberspace.de/farmshops/leaflet.ajax.min.js
)
2) Once this is corrected, the L is not defined
error correctly appears. 2)更正此错误后,将正确显示
L is not defined
错误。 You have to place the <script>
tag for Leaflet-ajax plugin after the one for Leaflet. 您必须将Leaflet-ajax插件的
<script>
标记放置在Leaflet的标记之后 。
3) The TypeError: geojsonLayer is undefined
error is due to your line geojsonLayer.addTo(map)
being actually placed before var geojsonLayer = new L.GeoJSON.AJAX("test.geojson")
You have to put it after the variable assignment. 3)
TypeError: geojsonLayer is undefined
错误是由于您的行geojsonLayer.addTo(map)
实际上放置在 var geojsonLayer = new L.GeoJSON.AJAX("test.geojson")
您必须将其放置在变量赋值之后。
Once these 3 errors are corrected, your GeoJSON file seems to be imported and rendered correctly. 更正这3个错误后,您的GeoJSON文件似乎已正确导入并呈现。
Demo: https://plnkr.co/edit/OwyfvvoaseLhhCyleN4n?p=preview 演示: https : //plnkr.co/edit/OwyfvvoaseLhhCyleN4n?p = preview
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.