Mapbox中编辑GeoJSON源、修改图层过滤器并重渲染地图

我在Mapbox中创建了一个多边形拉伸的GeoJSON图层，初始过滤器设置为隐藏所有要素：

map.current.addSource('congeoex', {
  type: 'geojson',   
  data: 'http://localhost:3000/geometries.geojson' 
}); 

map.current.addLayer({
  'id': 'congeoex',
  'type': 'fill-extrusion',
  'source': 'congeoex',
  'paint': { 
    'fill-extrusion-color': 'black', 
    'fill-extrusion-height': ['+',['to-number', ['get', 'mytop']] , 7],   
    'fill-extrusion-base':  ['+',['to-number', ['get', 'mytop']], 5]  
  },
  // 初始隐藏所有要素
  'filter': ['==', ['get','no'], 0]
}); 

之后会动态获取一个no属性数组array_of_no，代表需要拉伸的要素。需要实现：

1. 修改图层过滤器，显示这些要素
2. 编辑GeoJSON源，为对应要素添加mytop属性，值为递增的拉伸高度

尝试过两种方法但都失败：

• 直接获取源对象后无法编辑实际GeoJSON数据
• fetch获取数据修改后，地图没有同步更新

核心思路 #

Mapbox的GeoJSON源不会自动同步本地修改的数据，必须通过source.setData()方法主动更新源数据，同时配合setFilter()修改过滤器，地图才会重新渲染。

完整实现代码 #

// 假设array_of_no是已获取的目标要素no数组
async function updateLayerAndSource(array_of_no) {
  // 1. 获取GeoJSON源对象
  const geojsonSource = map.current.getSource('congeoex');
  if (!geojsonSource || geojsonSource.type !== 'geojson') return;

  // 2. 获取当前源的GeoJSON数据（优先用已加载数据，否则重新fetch）
  let geojsonData;
  if (geojsonSource._data) {
    // 深拷贝避免直接修改源内部数据
    geojsonData = JSON.parse(JSON.stringify(geojsonSource._data));
  } else {
    const res = await fetch('http://localhost:3000/geometries.geojson');
    geojsonData = await res.json();
  }

  // 3. 为目标要素添加mytop属性
  let elevHeight = 10;
  geojsonData.features.forEach(feature => {
    if (array_of_no.includes(feature.properties.no)) {
      feature.properties.mytop = elevHeight;
      elevHeight += 10;
    } else {
      // 可选：移除非目标要素的mytop属性，避免干扰渲染
      delete feature.properties.mytop;
    }
  });

  // 4. 更新GeoJSON源数据
  geojsonSource.setData(geojsonData);

  // 5. 修改图层过滤器，显示目标要素
  map.current.setFilter('congeoex', ['in', ['get', 'no'], ['literal', array_of_no]]);

  // setData和setFilter会自动触发重绘，无需手动调用triggerRepaint
}

// 调用示例（替换为你的array_of_no获取逻辑）
// updateLayerAndSource([1,2,3]);

关键注意点 #

• 深拷贝数据：直接修改geojsonSource._data不会触发地图更新，必须深拷贝后修改，再用setData()提交更新
• 减少重复请求：如果源数据已经加载完成，优先从_data获取，避免不必要的网络请求
• 过滤器语法：['in', ['get', 'no'], ['literal', array_of_no]]是正确的多值匹配语法，确保数组被识别为字面量
• 自动重绘：调用setData()和setFilter()后，Mapbox会自动触发地图重绘，无需手动调用triggerRepaint()

内容的提问来源于stack exchange，提问作者codebot