使用setPaintProperty更改地图框的填充-挤出高度

时间:2018-08-24 02:07:52

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

在小提琴上借一个例子:https://jsfiddle.net/tyf76u0d/4/

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

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

})

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

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

1 个答案:

答案 0 :(得分: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