获取Mapbox存储定位器的外部GeoJSON文件

我最近学习了Mapbox商店定位器教程，为我工作的巡回艺术家制作了一张简单的“即将到来的巡回日期”地图。这是伟大的工作，但我正在寻找一种更容易更新geoJSON点的方法-我将把页面的日常维护交给一位同事，我希望地图能够很容易地添加/删除点。目前，geoJSON点是内联编码到脚本中的，但是如果我可以通过geoJSON.io或Mapbox数据更新文件，并且它会自动将新点拉入地图中，这将是理想的。在任何给定时间，地图上显示的最多数据约为100个场地，不会使用多边形或边界框

这就是脚本当前获取geoJSON点的方式——变量“stores”将它们全部内联。我想知道在CMS（如Mapbox或geoJSON.io）中编辑/添加/删除geoJSON数据并通过脚本中的url动态更新数据的最佳方法

原谅我，如果这些都是荒谬的-我是新来的！提前感谢您的帮助

var stores = {

"type": "FeatureCollection",
"features": [
{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [
      -77.034084142948,
      38.909671288923
    ]
  },
  "properties": {
    "phoneFormatted": "(202) 234-7336",
    "phone": 2022347336,
    "address": "1471 P St NW",
    "city": "Washington DC",
    "country": "United States",
    "crossStreet": "at 15th St NW",
    "postalCode": 20005,
    "state": "D.C."
  }
}

map.on('load', function(e) {
    map.addSource("places", {
    "type": "geojson",
    "data": stores
});

---

其实很简单。您只需替换此行：

"data": stores

与

文件：

---

因此，您只需要找到一个可以在线存储GeoJSON文件并定期更新的地方。为此，我有时会使用Github的要点。

我花了两天时间才找到这个“看起来很简单”问题的答案

您需要在脚本中包含D3库（将v3更改为v6，但它不起作用，而且您和我一样已经一天过去了）

使用d3.json（）获取geojson数据

map.on（'load'，function（）{
//我们在这里使用D3获取JSON，这样我们就可以单独解析和使用它
//在添加的源代码中使用GL JS。您可以使用任何请求方法（库
//或者其他）你想要的。
d3.json(
“GEOJSON文件的路径”，
功能（错误、数据）{
如果（错误）抛出错误；
map.addSource（'stores'{
'type'：'geojson'，
“数据”：数据
});
map.addLayer({
'id'：'stores'，
“类型”：“圆”，
“源”：“存储”，
“油漆”：{
“圆半径”：6
}
});
data.features.forEach（函数（存储，i）{
store.properties.id=i；
});
建筑位置列表（数据）；
});
});

---

谢谢史蒂夫！不过，我发现Mapbox Store Locator脚本在创建Store列表的函数中使用了“stores”变量，我如何确保在没有包含内联geoJSON数据的“stores”变量的情况下该函数仍能工作？啊。你应该提到这一点。在这种情况下，您应该首先直接获取GeoJSON（使用类似D3的

.json（）

方法），并遵循您最初的方法。

"data": "https://..."