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

Question

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

我想制作一张地图，您可以在其中找到农场商店和牛奶自动售货机，供想要支持当地农民的人们使用。我发现这些东西可以在带有标签 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 和 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/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

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

Import geojson data to a leaflet map origanated from overpass turbo

javascript

ajax

openstreetmap

leaflet

overpass-api