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

Question

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

这就是脚本当前获得其GeoJSON点的方式——变量“存储”将它们全部内联。我想知道最好的方法是能够在像Mapbox或geojson.io这样的CMS中编辑/添加/删除GeoJSON数据，并通过脚本中的URL动态更新它。

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

var stores = {

"type": "FeatureCollection",
"features": [
{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [
      -77.034084142948,
      38.909671288923
    ]
  },
  "properties": {
    "phoneFormatted": "[phone]",
    "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
});

Answer 1

这实际上很容易。你只需替换这一行：

"data": stores

与

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

文档：https://www.mapbox.com/mapbox-gl-js/style-spec#sources-geojson

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

Answer 2

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

>

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

 map.on('load', function() {
   // We use D3 to fetch the JSON here so that we can parse and use it separately
   // from GL JS's use in the added source. You can use any request method (library
   // or otherwise) that you want.
   d3.json(
     'PATH TO YOUR GEOJSON FILE',
     function(err, data) {
       if (err) throw err;
       map.addSource('stores', {
                 'type': 'geojson',
                 'data': data
           });

       map.addLayer({
           'id': 'stores',
           'type': 'circle',
           'source': 'stores',
           'paint': {
             'circle-radius': 6
           }
       });
       data.features.forEach(function(store, i){
         store.properties.id = i;
       });
       buildLocationList(data);

     });

});