javascript - 将 geojson 数据导入立交桥 turbo 生成的传单 map

Question

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

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

我的头部区域看起来像这样:(几乎所有内容都是 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错误正确出现。你必须把 <script> Leaflet-ajax 插件的标签在 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