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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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-rampinterpolate
expressions. 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 |