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

回答

相关问题