将geojson数据导入由立交桥Turbo生成的传单地图

Question

我不是英语母语人士，所以请不要介意错误；）

我想制作一张地图，在这里可以找到想要支持当地农民的人们的农场商店和自动贩卖机。 我发现可以在OSM数据中找到这些东西，它们的标签为shop=farm和amenity=vending_machine selling:milk 。 有了这些信息，您可以轻松地在http://overpass-turbo.eu上创建查询并将其导出为JSON文件。 我使用“ osmtogeojson”将此数据转换为GeoJSON并将一个小的测试示例存储为“ test.geojson”在我的主文件夹中。 我还下载了leaflet.ajax.min.js并将其放在我的主文件夹中。 现在，我想将此本地GeoJSON文件导入Leaflet地图。 所以这是我的情况：

我的脑袋看起来像这样：（几乎所有内容都是来自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>

这是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);

Answer 1

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）更正此错误后，将正确显示L is not defined错误。 您必须将Leaflet-ajax插件的<script>标记放置在Leaflet的标记之后 。

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