使用 setPaintProperty 更改 mapbox 填充拉伸高度

Question

借用fiddle上的例子：https://jsfiddle.net/tyf76u0d/4/

 $('button').click(function() {

    map.setPaintProperty('3d-buildings', 'fill-extrusion-height', Math.random()*250 + 50);

})

此代码更改建筑物的所有高度。

如何使用 'setPaintProperty' 或其他方式设置不同高度的建筑物？

Answer 1

您可能希望在此处使用数据驱动的样式方法：

1. 更改 fill-extrusion-height 以使用表达式，该表达式使用基础特征（建筑物）的 属性 的值：

   map.setPaintProperty('3d-buildings', 'fill-extrusion-height', ['get', 'building-height'])
   

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

2. 更新底层数据，mapbox会自动从更新后拉取新的高度重新渲染属性:

   map
   .getSource('your-source-id')
   .setData(/* the updated geojson data */)
   

   文档：https://www.mapbox.com/mapbox-gl-js/api#geojsonsource#setdata