在 mapbox 中编辑 geojson 源并重新渲染层答案

【问题标题】：Edit a geojson source in mapbox and re-render layer在 mapbox 中编辑 geojson 源并重新渲染层
【发布时间】：2022-12-08 09:01:45
【问题描述】：

我有一个 geojson 层用于在 mapbox 中挤出多边形。一开始什么也没有显示的过滤器。

  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]  
    },
    //show nothing at first
    'filter': ['==', ['get','no'], 0]
  });

然后我动态地获取一组 no 属性，表示要以某种方式挤出的特征。

得到数组后，我更改图层的过滤器。然后我想根据该数组编辑图层的 geojson 源，并向 geojson 添加一个自定义属性，该属性是拉伸的增加高度。该自定义属性必须命名为 mytop，与 'fill-extrusion-height fill-extrusion-base 中的名称相同。

map.current.setFilter('congeoex', ['in',['get', 'no'] , ['literal',array_of_no]] )   
const geojsonSource = map.current.getSource('congeoex'); 
console.log('geojsonSource ', geojsonSource);
//edit geojson to add mytop attribute
//map.current.triggerRepaint();

我实际上不能这样做，因为 map.current.getSource('congeoex'); 不会返回要编辑的图层的实际 geojson 数据。

我尝试获取 geojson 数据并进行编辑，但看起来它在本地更改了前端的数据，而不是 mapbox 中的数据，因为我在地图上看不到任何变化

fetch('http://localhost:3000/geometries.geojson')
.then((res)=>{ 
  const data = res.json()  
  return data
})
.then(a => { 
  
  let anew = a.features.filter(item => array_of_no.includes(item.properties.no));

  let elevHeight = 10;
  anew.forEach(e =>{ 
    e.properties.customTop = elevHeight; 
    elevHeight = elevHeight + 10;
  }); 

})

map.current.setFilter('congeoex', ['in',['get', 'no'] , ['literal',array_of_no]] )   
map.current.triggerRepaint();

那么，如何编辑 mapbox 图层的 geojson 源，更改图层过滤器然后重新渲染地图？

谢谢

【问题讨论】：

标签： mapbox geojson mapbox-gl-js

【解决方案1】：

你是如此接近。

获取 GeoJSON 文件。
随心所欲地操纵它。
拨打map.getSource('congeoex').setData(...)

【讨论】：