1

我正在通过内部 URI 添加来自多个数据集的 geojson 源。我的 addSources() 函数循环遍历ds_list，每次调用所需的 ID 数组。如果我在 map.addSource() 调用中获取每个数据集，这可以工作（示例 #1），但是我无法访问所有数据集的特征 ID，用于样式、交互等。

因此，我想将每个 geojson 对象作为变量获取，但在示例 #2 中，获取了第一个数据集并渲染了源/图层，但以下一个返回错误 There is already a source with this ID。问题是，在进行第二次 addSource() 调用时，ID (ds.label) 已更改，如 console.log() 所示

示例 #1

# works, but feature IDs are not available
function addSources(ds_list){
  sources=[]
  for(d in ds_list){
    ds = ds_list[d]
    mappy.addSource(ds.label, {
      'type': 'geojson',
      'data': '/datasets/'+ds.id+'/geojson'
    });
    sources.push(ds.label)
    renderSourceLayers(ds.label, d)
  }
}

示例 #2

# error after 1 dataset: 'There is already a source with this ID'
function addSources(ds_list){
  sources=[]
  for(d in ds_list){
    ds = ds_list[d]
    console.log('now doing...', ds.label)
    $.getJSON('/datasets/'+ds.id+'/geojson')
      .done(function(dsdata) {
        mappy.addSource(ds.label, {
          'type': 'geojson',
          'data': dsdata
        });
        console.log('just added dsdata', ds.label, dsdata)
        sources.push(ds.label)
        renderSourceLayers(ds.label, d)
    })
  }
}

此渲染函数适用于示例 #1，并且永远不会在示例 #2 中为第二个数据集调用

渲染源层（）

function renderSourceLayers(dslabel, i){
  mappy.addLayer({
    'id': 'gl_'+dslabel+'_poly',
    'type': 'fill',
    'source': dslabel,
    'visibility': 'visible',
    'paint': {
      'fill-color': 'rgba(245,245,245, 0.5)',
      'fill-opacity': 0.2,
      'fill-outline-color': 'black'
    },
    'filter': ['==', '$type', 'Polygon']
  }, 'z-index-1');
  
  mappy.addLayer({
    'id': 'gl_'+dslabel+'_point',
    'type': 'circle',
    'source': dslabel,
    'visibility': 'visible',
    'paint': {
      'circle-color': colors_point[i],
      'circle-radius': {
        stops: [[1, 2], [3, 3], [16, 20]]
      }        
    },
    'filter': ['==', '$type', 'Point']
  }, 'z-index-2');  
  
}

数据集列表，供参考。用于此并生成选择下拉列表和 flyTo() 的边界：

ds_list = [
  {
    "id": 1,
    "label": "dataset01",
    "title": "wordy title 01",
    "bbox": {"type": "Polygon","coordinates": [[],[],[],[],[]]}
  },{
    "id": 2,
    "label": "dataset02",
    "title": "wordy title 02",
    "bbox": {"type": "Polygon","coordinates": [[],[],[],[],[]]}
  }
]
4

1 回答 1

0

问题在于 $.getJSON 的异步性质，而我很尴尬地说，答案很简单：在这种情况下使用 map.forEach()...

function addSources(ds_list){
  ds_list.forEach(function(ds,i){
    $.getJSON('/datasets/'+ds.id+'/geojson')
      .done(function(dsdata) {
        mappy.addSource(ds.label, {
          'type': 'geojson',
          'data': dsdata
        });
        renderSourceLayers(ds.label, i)
    })
  })
}

以前没有以这种方式使用过javascript Map。生活和学习……公开

于 2021-07-31T16:16:02.347 回答