2025-07-20

fill-extrusion 填充挤压

A fill-extrusion style layer renders one or more filled (and optionally stroked) extruded (3D) polygons on a map. You can use a fill-extrusion layer to configure the extrusion and visual appearance of polygon or multipolygon features.
“填充挤出”样式层在地图上渲染一个或多个填充(和可选的描边)挤出(3D)多边形。可以使用填充拉伸层来配置多边形或多边形特征的拉伸和视觉外观。

This map uses an external dataset to provide data-driven values for the fill-extrusion-height paint property of various country polygons in a fill-extrusion layer.
此地图使用外部数据集为填充拉伸层中各种[国家多边形]的[填充拉伸高度]绘制属性提供数据驱动值。

fill-extrusion-ambient-occlusion-ground-attenuation 填充挤出环境遮挡地面衰减

[Paint] property. Optional [number]between 0 and 1 inclusive. Defaults to 0.69. Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">lights</var>. Supports [smooth-rampinterpolate]expressions. opacityTransitionable.

Provides a control to futher fine-tune the look of the ambient occlusion on the ground beneath the extruded buildings. Lower values give the effect a more solid look while higher values make it smoother.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |

fill-extrusion-ambient-occlusion-ground-radius

EXPERIMENTAL

Paint property. Optional number greater than or equal to 0. Defaults to 3. Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">lights</var>. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

The extent of the ambient occlusion effect on the ground beneath the extruded buildings in meters.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |

fill-extrusion-ambient-occlusion-intensity

Paint property. Optional number between 0 and 1 inclusive. Defaults to 0. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Controls the intensity of shading near ground and concave angles between walls. Default value 0.0 disables ambient occlusion and values around 0.3 provide the most plausible results for buildings.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 10.7.0 | >= 10.7.0 |

fill-extrusion-ambient-occlusion-radius

Paint property. Optional number greater than or equal to 0. Defaults to 3. Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">fill-extrusion-edge-radius</var>. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Shades area near ground and concave angles between walls where the radius defines only vertical impact. Default value 3.0 corresponds to height of one floor and brings the most plausible results for buildings. This property works only with legacy light. When 3D lights are enabled fill-extrusion-ambient-occlusion-wall-radius and fill-extrusion-ambient-occlusion-ground-radius are used instead.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 10.7.0 | >= 10.7.0 |

fill-extrusion-ambient-occlusion-wall-radius

EXPERIMENTAL

Paint property. Optional number greater than or equal to 0. Defaults to 3. Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">lights</var>. Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">fill-extrusion-edge-radius</var>. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Shades area near ground and concave angles between walls where the radius defines only vertical impact. Default value 3.0 corresponds to height of one floor and brings the most plausible results for buildings.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |

fill-extrusion-base

Paint property. Optional number greater than or equal to 0. Units in <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">meters</var>. Defaults to 0. Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">fill-extrusion-height</var>. Supports combinefeature-state and smooth-rampinterpolateexpressions. opacityTransitionable.

The height with which to extrude the base of this layer. Must be less than or equal to fill-extrusion-height.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 0.27.0 | >= 5.1.0 | >= 3.6.0 |
|

data-driven styling

| >= 0.27.0 | >= 5.1.0 | >= 3.6.0 |

fill-extrusion-base-alignment

EXPERIMENTAL

Paint property. Optional enum . One of "terrain", "flat". Defaults to "terrain". Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">fill-extrusion-base</var>.

Controls the behavior of fill extrusion base over terrain

<dl style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">

<dt style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">"terrain":</dt>

<dd class="mb12" style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 12px !important; margin-left: 0px; padding: 0px; font-size: 16px;">

The fill extrusion base follows terrain slope.

</dd>

<dt style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">"flat":</dt>

<dd class="mb12" style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">

The fill extrusion base is flat over terrain.

</dd>

</dl>

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.8.0 | >= 11.8.0 | >= 11.8.0 |

fill-extrusion-cast-shadows

Paint property. Optional boolean . Defaults to true.

Enable/Disable shadow casting for this layer

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.7.0 | >= 11.8.0 | >= 11.8.0 |

fill-extrusion-color

Paint property. Optional color . Defaults to "#000000". Disabled by <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">fill-extrusion-pattern</var>. Supports combinefeature-state and smooth-rampinterpolateexpressions. opacityTransitionable.

The base color of the extruded fill. The extrusion's surfaces will be shaded differently based on this color in combination with the root light settings. If this color is specified as rgba with an alpha component, the alpha component will be ignored; use fill-extrusion-opacity to set layer opacity.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 0.27.0 | >= 5.1.0 | >= 3.6.0 |
|

data-driven styling

| >= 0.27.0 | >= 5.1.0 | >= 3.6.0 |

fill-extrusion-cutoff-fade-range

Paint property. Optional number between 0 and 1 inclusive. Defaults to 0.

This parameter defines the range for the fade-out effect before an automatic content cutoff on pitched map views. Fade out is implemented by scaling down and removing buildings in the fade range in a staggered fashion. Opacity is not changed. The fade range is expressed in relation to the height of the map view. A value of 1.0 indicates that the content is faded to the same extent as the map's height in pixels, while a value close to zero represents a sharp cutoff. When the value is set to 0.0, the cutoff is completely disabled. Note: The property has no effect on the map if terrain is enabled.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |

fill-extrusion-edge-radius

EXPERIMENTAL

Layout property. Optional number between 0 and 1 inclusive. Defaults to 0.

Radius of a fill extrusion edge in meters. If not zero, rounds extrusion edges for a smoother appearance.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 10.7.0 | >= 10.7.0 |
|

expressions support

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |

fill-extrusion-emissive-strength

Paint property. Optional number greater than or equal to 0. Units in <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">intensity</var>. Defaults to 0. Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">lights</var>. Supports combinefeature-state and smooth-rampinterpolateexpressions. opacityTransitionable.

Controls the intensity of light emitted on the source features.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |
|

data-driven styling

| >= 3.8.0 | >= 11.8.0 | >= 11.8.0 |

fill-extrusion-flood-light-color

EXPERIMENTAL

Paint property. Optional color . Defaults to "#ffffff". Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">lights</var>. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

The color of the flood light effect on the walls of the extruded buildings.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |

fill-extrusion-flood-light-ground-attenuation

EXPERIMENTAL

Paint property. Optional number between 0 and 1 inclusive. Defaults to 0.69. Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">lights</var>. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Provides a control to futher fine-tune the look of the flood light on the ground beneath the extruded buildings. Lower values give the effect a more solid look while higher values make it smoother.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |

fill-extrusion-flood-light-ground-radius

EXPERIMENTAL

Paint property. Optional number . Units in <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">meters</var>. Defaults to 0. Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">lights</var>. Supports combinefeature-state and smooth-rampinterpolateexpressions. opacityTransitionable.

The extent of the flood light effect on the ground beneath the extruded buildings in meters. Note: this experimental property is evaluated once per tile, during tile initialization. Changing the property value could trigger tile reload. The feature-state styling is deprecated and will get removed soon.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |
|

data-driven styling

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |

fill-extrusion-flood-light-intensity

EXPERIMENTAL

Paint property. Optional number between 0 and 1 inclusive. Defaults to 0. Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">lights</var>. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

The intensity of the flood light color.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |

fill-extrusion-flood-light-wall-radius

EXPERIMENTAL

Paint property. Optional number greater than or equal to 0. Units in <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">meters</var>. Defaults to 0. Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">lights</var>. Supports combinefeature-state and smooth-rampinterpolateexpressions. opacityTransitionable.

The extent of the flood light effect on the walls of the extruded buildings in meters.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |
|

data-driven styling

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |

fill-extrusion-height

Paint property. Optional number greater than or equal to 0. Units in <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">meters</var>. Defaults to 0. Supports combinefeature-state and smooth-rampinterpolateexpressions. opacityTransitionable.

The height with which to extrude this layer.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 0.27.0 | >= 5.1.0 | >= 3.6.0 |
|

data-driven styling

| >= 0.27.0 | >= 5.1.0 | >= 3.6.0 |

fill-extrusion-height-alignment

EXPERIMENTAL

Paint property. Optional enum . One of "terrain", "flat". Defaults to "flat". Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">fill-extrusion-height</var>.

Controls the behavior of fill extrusion height over terrain

<dl style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">

<dt style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">"terrain":</dt>

<dd class="mb12" style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 12px !important; margin-left: 0px; padding: 0px; font-size: 16px;">

The fill extrusion height follows terrain slope.

</dd>

<dt style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">"flat":</dt>

<dd class="mb12" style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">

The fill extrusion height is flat over terrain.

</dd>

</dl>

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.8.0 | >= 11.8.0 | >= 11.8.0 |

fill-extrusion-line-width

EXPERIMENTAL

Paint property. Optional number greater than or equal to 0. Units in <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">meters</var>. Defaults to 0. Supports combinefeature-state and smooth-rampinterpolateexpressions. opacityTransitionable.

If a non-zero value is provided, it sets the fill-extrusion layer into wall rendering mode. The value is used to render the feature with the given width over the outlines of the geometry. Note: This property is experimental and some other fill-extrusion properties might not be supported with non-zero line width.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.7.0 | >= 11.7.0 | >= 11.7.0 |
|

data-driven styling

| >= 3.7.0 | >= 11.7.0 | >= 11.7.0 |

fill-extrusion-opacity

Paint property. Optional number between 0 and 1 inclusive. Defaults to 1. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

The opacity of the entire fill extrusion layer. This is rendered on a per-layer, not per-feature, basis, and data-driven styling is not available.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 0.27.0 | >= 5.1.0 | >= 3.6.0 |

fill-extrusion-pattern

Paint property. Optional resolvedImage .

Name of image in sprite to use for drawing images on extruded fills. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 0.27.0 | >= 5.1.0 | >= 3.6.0 |
|

data-driven styling

| >= 0.49.0 | >= 6.5.0 | >= 4.4.0 |

fill-extrusion-pattern-cross-fade

Paint property. Optional number between 0 and 1 inclusive. Defaults to 0. Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">line-pattern</var>. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

Controls the transition progress between the image variants of fill-extrusion-pattern. Zero means the first variant is used, one is the second, and in between they are blended together.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.12.0 | Not yet supported | Not yet supported |

fill-extrusion-rounded-roof

EXPERIMENTAL

Paint property. Optional boolean . Defaults to true. Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">fill-extrusion-edge-radius</var>.

Indicates whether top edges should be rounded when fill-extrusion-edge-radius has a value greater than 0. If false, rounded edges are only applied to the sides. Default is true.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 10.10.0 | >= 10.10.0 |

fill-extrusion-translate

Paint property. Optional array of numbers . Units in <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">pixels</var>. Defaults to [0,0]. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

The geometry's offset. Values are [x, y] where negatives indicate left and up (on the flat plane), respectively.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 0.27.0 | >= 5.1.0 | >= 3.6.0 |

fill-extrusion-translate-anchor

Paint property. Optional enum . One of "map", "viewport". Defaults to "map". Requires <var style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px; color: rgb(210, 60, 117); font-style: italic;">fill-extrusion-translate</var>.

Controls the frame of reference for fill-extrusion-translate.

<dl style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">

<dt style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">"map":</dt>

<dd class="mb12" style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 12px !important; margin-left: 0px; padding: 0px; font-size: 16px;">

The fill extrusion is translated relative to the map.

</dd>

<dt style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">"viewport":</dt>

<dd class="mb12" style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">

The fill extrusion is translated relative to the viewport.

</dd>

</dl>

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 0.27.0 | >= 5.1.0 | >= 3.6.0 |

fill-extrusion-vertical-gradient

Paint property. Optional boolean . Defaults to true.

Whether to apply a vertical gradient to the sides of a fill-extrusion layer. If true, sides will be shaded slightly darker farther down.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 0.50.0 | >= 7.0.0 | >= 4.7.0 |

fill-extrusion-vertical-scale

EXPERIMENTAL

Paint property. Optional number greater than or equal to 0. Defaults to 1. Supports smooth-rampinterpolateexpressions. opacityTransitionable.

A global multiplier that can be used to scale base, height, AO, and flood light of the fill extrusions.

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |

visibility

Layout property. Optional enum . One of "visible", "none". Defaults to "visible".

Whether this layer is displayed.

<dl style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">

<dt style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">"visible":</dt>

<dd class="mb12" style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 12px !important; margin-left: 0px; padding: 0px; font-size: 16px;">

The layer is shown.

</dd>

<dt style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">"none":</dt>

<dd class="mb12" style="box-sizing: inherit; vertical-align: baseline; border: 0px; margin: 0px; padding: 0px; font-size: 16px;">

The layer is not shown.

</dd>

</dl>

SDK Support Mapbox GL JS Android SDK iOS SDK

basic functionality

| >= 0.27.0 | >= 5.1.0 | >= 3.6.0 |
|

expressions support

| >= 3.0.0 | >= 11.0.0 | >= 11.0.0 |

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容