在 Mapbox GL JS 中，您可以将坐标传递给外部 GeoJSON 数据源吗？答案

【问题标题】：In Mapbox GL JS, can you pass coordinates to an external GeoJSON data source?在 Mapbox GL JS 中，您可以将坐标传递给外部 GeoJSON 数据源吗？
【发布时间】：2023-01-30 21:01:50
【问题描述】：

尝试检索外部 GeoJSON 数据源时，可以将坐标值作为变量传递吗？理想情况下，我想传递这样的东西，但它对我不起作用。

map.addSource('geojsonpoints', {
    type: "geojson",
    data: 'http://myexample.com/pins?lat={lat}&lon={long}'
  });

如果我使用 Map Vector Tiles (mvt) 作为源，我可以传递 Z、X、Y 坐标。即这有效：

  map.addSource('mapvectortiles', {
    'type': 'vector',
    'tiles': ['http://myexample.com/{z}/{x}/{y}'],

但我还没有想出如何为 GeoJSON 源做这件事。如果在 n Mapbox GL JS 中有可能，有人有任何想法吗？

仅供参考，我可以使用下面的方法生成 URL，但问题是当我移动地图时它不会刷新，这与矢量图块不同。

var lng = map.getCenter().lng
var lat = map.getCenter().lat
var url = 'http://myexample.com/pins?lat='+lat+'&lon='+lng
map.addSource('EPC', {
  type: "geojson",
  data: url
});

【问题讨论】：

标签： coordinates mapbox-gl-js

【解决方案1】：

我使用 GeoJSON 在地图上绘制 Tiles

这是一个示例 GeoJSON：

    { "type": "FeatureCollection", 
  "features": [
    { "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [ 
            [4.342254780676343, 50.89533552689166], 
            [4.342254780676343, 50.89443721160754], 
            [4.340830581474948, 50.89443721160754],
            [4.340830581474948, 50.89533552689166],
            [4.342254780676343, 50.89533552689166]
         ]
        ]
      },
      "properties": {}
    }    
  ]
}

毕竟你必须添加源并添加图层

添加来源：

const sourceJson: GeoJSONSourceRaw = {
        type: 'geojson',
        data: data as FeatureCollection
    };
    map.addSource(sourceId, sourceJson)

数据是你的json文件

添加图层：

 const layer: FillLayer =  {
        id: sourceId,
        source: sourceId,
        type: 'fill',
        paint: {
            'fill-color': color,
            'fill-opacity': opacity 
        }
    }
        
    this.map.addLayer(layer);

【讨论】：