【问题标题】:change mapbox fill-extrusion-height by using setPaintProperty使用 setPaintProperty 更改地图框填充挤出高度
【发布时间】:2024-04-15 06:10:02
【问题描述】:

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

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

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

})

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

如何使用“setPaintProperty”或其他方式将建筑物设置为不同的高度?

【问题讨论】:

    标签: javascript 3d mapbox mapbox-gl-js


    【解决方案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

    【讨论】:

    • 谢谢!我使用第二种方式。但“setData”只是跳转到结束状态。伤心