Maplibre GL JS 中文文档Maplibre GL JS 中文文档
介绍
插件
样式规范
API
案例
指南
介绍
插件
样式规范
API
案例
指南
  • 介绍
  • 插件
  • 样式规范
    • 弃用功能
    • 表达式
    • 字形
    • 图层
    • 光照
    • 投影
    • 根属性
    • 天空
    • 数据源
    • 精灵图
    • 状态
    • 地形
    • 过渡
    • 类型
  • API
    • media

      • 为 MapLibre GL JS 做贡献
    • Classes

      • AJAXError
      • Actor
      • AlphaImage
      • AttributionControl
      • BoxZoomHandler
      • CanonicalTileID
      • CanvasSource
      • CircleStyleLayer
      • ClickZoomHandler
      • CooperativeGesturesHandler
      • DEMData
      • Dispatcher
      • DoubleClickZoomHandler
      • DragPanHandler
      • DragRotateHandler
      • EdgeInsets
      • ErrorEvent
      • Event
      • Evented
      • FeatureIndex
      • FullscreenControl
      • GeoJSONFeature
      • GeoJSONSource
      • GlobeControl
      • Hash
      • HeatmapStyleLayer
      • ImageAtlas
      • ImageManager
      • ImageSource
      • KeyboardHandler
      • Layout<Props>
      • LngLat
      • LngLatBounds
      • LogoControl
      • Map
      • MapMouseEvent
      • MapTouchEvent
      • MapWheelEvent
      • Marker
      • MercatorCoordinate
      • NavigationControl
      • OverscaledTileID
      • Popup
      • RGBAImage
      • RasterDEMTileSource
      • RasterTileSource
      • ScaleControl
      • ScrollZoomHandler
      • Style
      • abstract StyleLayer
      • SubdivisionGranularityExpression
      • SubdivisionGranularitySetting
      • TapDragZoomHandler
      • TapZoomHandler
      • TerrainControl
      • ThrottledInvoker
      • Tile
      • TouchPanHandler
      • 抽象 TwoFingersTouchHandler
      • TwoFingersTouchPitchHandler
      • TwoFingersTouchRotateHandler
      • TwoFingersTouchZoomHandler
      • TwoFingersTouchZoomRotateHandler
      • VectorTileSource
      • VideoSource
      • WorkerPool
    • Enumerations

      • MessageType
      • ResourceType
      • TextFit
    • Functions

      • addProtocol()
      • addSourceType()
      • clearPrewarmedResources()
      • createTileMesh()
      • getMaxParallelImageRequests()
      • getRTLTextPluginStatus()
      • getVersion()
      • getWorkerCount()
      • getWorkerUrl()
      • importScriptInWorkers()
      • prewarm()
      • removeProtocol()
      • setMaxParallelImageRequests()
      • setWorkerCount()
      • setWorkerUrl()
    • Interfaces

      • ActorTarget
      • AttributeBinder
      • Bucket
      • CustomLayerInterface
      • Handler
      • IActor
      • IControl
      • MousePanHandler
      • MousePitchHandler
      • MouseRollHandler
      • MouseRotateHandler
      • Projection
      • Source
      • StyleImageInterface
      • Subscription
    • Type aliases

      • ActorMessage<T>
      • AddLayerObject
      • AddProtocolAction
      • Alignment
      • AnimationOptions
      • AroundCenterOptions
      • AttributionControlOptions
      • CalculateTileZoomFunction
      • CameraForBoundsOptions
      • CameraOptions
      • CameraUpdateTransformFunction()
      • CanvasSourceSpecification
      • CenterZoomBearing
      • CircleGranularity
      • ClusterIDAndSource
      • Complete<T>
      • Config
      • ControlPosition
      • Coordinates
      • CreateTileMeshOptions
      • CrossFaded<T>
      • CustomRenderMethod()
      • CustomRenderMethodInput
      • DEMEncoding
      • DashEntry
      • DistributiveKeys<T>
      • DistributiveOmit<T, K>
      • DragPanOptions
      • DragRotateHandlerOptions
      • EaseToOptions
      • ExpiryData
      • FeatureIdentifier
      • FitBoundsOptions
      • FlyToOptions
      • FullscreenControlOptions
      • GeoJSONFeatureDiff
      • GeoJSONFeatureId
      • GeoJSONSourceDiff
      • GeoJSONSourceOptions
      • GeoJSONWorkerOptions
      • GeoJSONWorkerSourceLoadDataResult
      • GeolocateControlOptions
      • GestureOptions
      • GetClusterLeavesParams
      • GetGlyphsParameters
      • GetGlyphsResponse
      • GetImagesParameters
      • GetImagesResponse
      • GetResourceResponse<T>
      • GlyphPosition
      • GlyphMetrics
      • GridKey
      • HandlerResult
      • IndicesType
      • JumpToOptions
      • Listener()
      • LngLatBoundsLike
      • LngLatLike
      • LoadGeoJSONParameters
      • LogoControlOptions
      • MapContextEvent
      • MapDataEvent
      • MapEventType
      • MapGeoJSONFeature
      • MapLayerEventType
      • MapLayerMouseEvent
      • MapLayerTouchEvent
      • MapLibreEvent
      • MapLibreZoomEvent
      • MapOptions
      • MapProjectionEvent
      • MapSourceDataType
      • MapSourceDataEvent
      • MapStyleDataEvent
      • MapStyleImageMissingEvent
      • MapTerrainEvent
      • MarkerOptions
      • MessageData
      • NavigationControlOptions
      • /api/type-aliases/Offset.html
      • OverlapMode
      • PaddingOptions
      • PluginState
      • PointLike
      • PointProjection
      • PopupOptions
      • PositionAnchor
      • PossiblyEvaluatedValue<T>
      • ProjectionData
      • ProjectionDataParams
      • QueryRenderedFeaturesOptions
      • QuerySourceFeatureOptions
      • RTLPluginStatus
      • Rect
      • RemoveSourceParams
      • RequestParameters
      • RequestResponseMessageMap
      • RequestTransformFunction()
      • RequireAtLeastOne<T>
      • ScaleControlOptions
      • Serialized
      • SerializedObject<S>
      • SerializedStructArray
      • SetClusterOptions
      • SourceClass()
      • SpriteOnDemandStyleImage
      • StyleGlyph
      • StyleImage
      • StyleImageData
      • StyleImageMetadata
      • StyleOptions
      • StyleSetterOptions
      • StyleSwapOptions
      • SymbolQuad
      • TileMesh
      • TileParameters
      • TileState
      • TransformStyleFunction()
      • Unit
      • UpdateImageOptions
      • UpdateLayersParamaeters
      • WorkerDEMTileParameters
      • WorkerTileParameters
      • WorkerTileResult
  • 案例
    • 3D建筑显示
    • 3D室内地图多边形挤出
    • 3D地形
    • 使用babylon.js添加3D模型
    • 使用three.js添加带阴影的3D模型
    • 在地形上使用three.js添加3D模型
    • 使用three.js添加3D模型
    • 添加默认标记
    • 添加云优化地理TIFF (COG)
    • 使用REST API添加DeckGL图层
    • 添加动画图像
    • 添加生成的图像
    • 动态生成并添加缺失图标到地图
    • 向地图添加可拉伸图片
    • 向地图添加图标
    • 动画线条
    • 绕点相机动画
    • 图像序列动画
    • 标记动画
    • 点动画
    • 沿路径点动画
    • 符号跟随鼠标动画
    • 更改版权信息位置
    • 自定义相机动画
    • 添加Canvas数据源
    • 使地图在点击符号时居中
    • 设置地面以上的中心点
    • 根据缩放级别更改建筑物颜色
    • 更改标签大小写
    • 检查是否支持WebGL
    • 使用自定义属性显示HTML集群
    • 创建和样式化集群
    • 使用按钮更改图层颜色
    • 添加等高线
    • 合作手势
    • 使用自定义标记图标
    • 添加自定义样式图层
    • 使用数据驱动属性设置线条样式
    • 禁用地图旋转
    • 禁用滚动缩放
    • 显示和样式丰富文本标签
    • 创建可拖动标记
    • 创建可拖动点
    • 绘制一个圆形
    • 使用备用图像
    • 使用addProtocol转换特性属性
    • 向多边形添加图案
    • 通过文本输入过滤符号
    • 通过切换列表过滤符号
    • 在图层内过滤
    • 将地图适配到边界框
    • 缓慢飞行到位置
    • 飞行到位置
    • 查看全屏地图
    • 使用游戏控制导航地图
    • 在标签下方添加新图层
    • 添加GeoJSON线条
    • 添加自定义标记
    • 添加GeoJSON多边形
    • 在地球仪上加载3D模型
    • 地球仪大气层
    • 简单自定义地球仪
    • 自定义瓦片地球仪
    • 在地球仪上显示填充挤出层
    • 使用矢量地图显示地球仪
    • 地球仪上缩放和行星大小的关系
    • 哈希路由
    • 地球仪上带地形高程的热力图
    • 创建热力图图层
    • 添加多方向山体阴影图层
    • 添加山体阴影图层
    • 创建悬停效果
    • 显示带地形高程的混合卫星地图
    • 显示非交互式地图
    • 跳转到一系列位置
    • 切换地图语言
    • 显示跨越180度子午线的线条
    • 使用表达式创建渐变线条
    • 添加实时数据
    • 实时更新地图要素
    • 查看本地GeoJSON文件(实验性)
    • 查看本地GeoJSON文件
    • 使用本地生成的表意文字
    • 定位用户位置
    • 细节层次控制
    • 添加栅格瓦片源
    • 使用Mapbox GL Draw绘制多边形
    • 支持从右到左文本
    • 使用 Terra-Draw 绘制几何图形
    • 测量距离
    • 获取鼠标指针坐标
    • 从单个GeoJSON源添加多个几何图形
    • 显示地图导航控件
    • 使用内边距偏移消失点
    • PMTiles 源和协议
    • 点击多边形显示信息
    • 点击显示弹出窗口
    • 悬停显示弹出窗口
    • 显示弹出窗口
    • 获取鼠标指针下的要素
    • 渲染世界副本
    • 限制地图平移到某个区域
    • 显示卫星地图
    • 基于滚动位置飞行到特定位置
    • 设置俯仰角和方位角
    • 为标记添加弹出窗口
    • 显示一个地图
    • 天空、雾和地形
    • 同步多个地图的移动
    • 创建时间轴滑块
    • 切换deck.gl图层
    • 切换交互功能
    • 可变标签放置
    • 可变偏移标签放置
    • 添加矢量瓦片源
    • 在地图上播放视频
    • 可视化人口密度
    • 添加WMS服务
    • 缩放至线要素
  • 指南
    • 优化MapLibre性能: 大型GeoJSON数据集的技巧
    • Leaflet迁移指南
    • Mapbox迁移指南
    • OpenLayers迁移指南

弃用功能

一些样式属性不再是实现特定样式目标的首选方法。虽然它们仍然受支持,但不建议在新样式中使用它们,因为在同时使用弃用和非弃用样式属性时,它们可能无法按预期运行。以下内容作为参考提供给需要继续维护旧版样式的用户,同时过渡到首选样式属性。可以使用 gl-style-migrat 工具将样式文件迁移到最新版本,并用支持的等效表达式替换已弃用的表达式。

在大多数弃用过滤器的情况下,您应该添加 get 和 literal 来将旧语法转换为新语法,例如 [">=", "count", 5] 应转换为 [">=", ["get", "count"], 5],而 ["in", "nature", "road", "highway"] 应转换为 ["in", ["get", "nature"], ["literal", ["road", "highway"]]]。

函数

从 v0.41.0 开始,属性表达式是基于缩放级别或要素属性设置要素样式的首选方法。缩放和属性函数仍然受支持,但不推荐使用。

任何布局或绘制属性的值都可以指定为_函数_。函数允许您根据当前缩放级别和/或要素的属性来更改地图要素的外观。

stops

必需(除 identity 函数外)数组。

一个输入值和一个输出值的集合是一个"步进"。步进输出值必须是字面值(即不是函数或表达式),并且适合该属性。例如,fill-color 函数属性的步进输出值必须是颜色。

property

可选字符串。

如果指定,函数将使用指定的要素属性作为输入。有关更多信息,请参阅缩放函数和属性函数。

base

可选数字。默认为 1。

插值曲线的指数基数。它控制函数输出增加的速率。较高的值使输出更多地向范围的高端增加。当值接近 1 时,输出线性增加。

type

可选字符串。可选值为 identity、exponential、interval 或 categorical。

identity:一个返回其输入作为输出的函数。

exponential:通过在小于和大于函数输入的步进之间进行插值来生成输出的函数。域(输入值)必须是数值型,并且样式属性必须支持插值。支持插值的样式属性标有"exponential"符号,exponential 是这些属性的默认函数类型。

interval:返回小于函数输入的步进的输出值的函数。域(输入值)必须是数值型。任何样式属性都可以使用区间函数。对于标有"interval"符号的属性,这是默认函数类型。

categorical:返回等于函数输入的步进输出值的函数。

default

当值不可用时作为备用函数结果的值。它在以下情况下使用:

  • 在分类函数中,当要素值与任何步进域值都不匹配时。
  • 在属性和缩放及属性函数中,当要素不包含指定属性的值时。
  • 在身份函数中,当要素值对样式属性无效时(例如,如果函数用于 circle-color 属性,但要素属性值不是字符串或不是有效颜色)。
  • 在区间或指数属性以及缩放及属性函数中,当要素值不是数值型时。

如果未提供默认值,则在这些情况下使用样式属性的默认值。

colorSpace

可选字符串。可选值为 rgb、lab、hcl。

插值颜色的色彩空间。在感知色彩空间(如 LAB 和 HCL)中插值颜色往往会产生看起来更一致的色彩渐变,并产生可以比在 RGB 空间中插值的颜色更容易区分的颜色。

rgb:使用 RGB 色彩空间插值颜色值

lab:使用 LAB 色彩空间插值颜色值。

hcl:使用 HCL 色彩空间插值颜色值,分别插值色相、色度和亮度通道。

SDK 支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能0.10.02.0.12.0.0
property0.18.00.18.00.18.0
code0.18.05.0.05.0.0
exponential 类型0.18.05.0.03.5.0
interval 类型0.18.05.0.03.5.0
categorical 类型0.18.05.0.03.5.0
identity 类型0.26.05.0.03.5.0
default0.33.05.0.03.5.0
colorSpace0.26.0

缩放和属性函数

缩放函数允许地图要素的外观随地图的缩放级别而变化。缩放函数可用于创建深度错觉和控制数据密度。每个步进是一个包含两个元素的数组:第一个是缩放级别,第二个是函数输出值。

{
    "circle-radius": {
        "stops": [
            // 缩放为 5 -> 圆半径将为 1px
            [5, 1],
            // 缩放为 10 -> 圆半径将为 2px
            [10, 2]
        ]
    }
}

颜色、数字和数组属性的渲染值在步进之间插值。布尔值和字符串属性值不能插值,因此它们的渲染值仅在指定的步进处更改。

_布局_和_绘制_属性的缩放函数渲染方式存在重要差异。绘制属性在缩放级别变化时会不断重新评估,即使是小数变化也是如此。例如,当地图在缩放级别 4.1 和 4.6 之间移动时,绘制属性的渲染值将改变。然而,布局属性仅在每个整数缩放级别评估一次。继续前面的例子:无论指定什么步进,布局属性的渲染在缩放级别 4.1 和 4.6 之间_不会_改变;但在缩放级别 5,函数将根据函数重新评估,并且属性的渲染值将改变。(您可以在布局属性缩放函数中包含小数缩放级别,它将影响生成的值;但是,渲染仍然只会在整数缩放级别变化。)

属性函数允许地图要素的外观随其属性而变化。属性函数可用于在同一图层内视觉区分要素类型或创建数据可视化。每个步进是一个包含两个元素的数组,第一个是属性输入值,第二个是函数输出值。请注意,对属性函数的支持并非在所有属性和平台上都可用。

{
    "circle-color": {
        "property": "temperature",
        "stops": [
            // "temperature" 为 0 -> 圆颜色将为蓝色
            [0, 'blue'],
            // "temperature" 为 100 -> 圆颜色将为红色
            [100, 'red']
        ]
    }
}

缩放和属性函数允许地图要素的外观随其属性_和_缩放同时变化。每个步进是一个包含两个元素的数组,第一个是具有属性输入值和缩放的对象,第二个是函数输出值。请注意,对属性函数的支持尚未完全完成。

{
    "circle-radius": {
        "property": "rating",
        "stops": [
            // 缩放为 0 且 "rating" 为 0 -> 圆半径将为 0px
            [{zoom: 0, value: 0}, 0],

            // 缩放为 0 且 "rating" 为 5 -> 圆半径将为 5px
            [{zoom: 0, value: 5}, 5],

            // 缩放为 20 且 "rating" 为 0 -> 圆半径将为 0px
            [{zoom: 20, value: 0}, 0],

            // 缩放为 20 且 "rating" 为 5 -> 圆半径将为 20px
            [{zoom: 20, value: 5}, 20]
        ]
    }
}

其他过滤器

在样式规范的早期版本中,过滤器是使用下面记录的已弃用语法定义的。虽然使用此语法定义的过滤器将继续工作,但我们建议使用更灵活的表达式语法。表达式语法和下面的弃用语法不能在单个过滤器定义中混用。

存在过滤器

["has", key] feature[key] 存在

["!has", key] feature[key] 不存在

比较过滤器

["==", key, value] 相等:feature[key] = value

["!=", key, value] 不相等:feature[key] ≠ value

[">", key, value] 大于:feature[key] > value

[">=", key, value] 大于或等于:feature[key] ≥ value

["<", key, value] 小于:feature[key] < value

["<=", key, value] 小于或等于:feature[key] ≤ value

集合成员过滤器

["in", key, v0, ..., vn] 集合包含:feature[key] ∈ {v0, ..., vn}

["!in", key, v0, ..., vn] 集合排除:feature[key] ∉ { v0, ..., vn}

组合过滤器

["all", f0, ..., fn] 逻辑 AND:f0 ∧ ... ∧ fn

["any", f0, ..., fn] 逻辑 OR:f0 ∨ ... ∨ fn

["none", f0, ..., fn] 逻辑 NOR:¬f0 ∧ ... ∧ ¬fn

key 必须是标识要素属性的字符串,或以下特殊键之一:

  • $type:要素类型。此键可与 "=="、"!="、"in" 和 "!in" 运算符一起使用。可能的值是 "Point"、"LineString" 和 "Polygon"。
  • $id:要素标识符。此键可与 "=="、"!="、"has"、"!has"、"in" 和 "!in" 运算符一起使用。

value(以及集合运算符的 v0, ..., vn)必须是字符串、数字或布尔值,用于与属性值进行比较。

集合成员过滤器是测试字段是否匹配多个值中的任意一个的紧凑高效方式。

比较和集合成员过滤器实现严格类型的比较;例如,以下所有评估为 false:0 < "1"、2 == "2"、"true" in [true, false]。

"all"、"any" 和 "none" 过滤器运算符用于创建复合过滤器。值 f0, ..., fn 必须本身是过滤器表达式。

["==", "$type", "LineString"]

此过滤器要求每个要素的 class 属性等于 "street_major"、"street_minor" 或 "street_limited" 之一。

["in", "class", "street_major", "street_minor", "street_limited"]

组合过滤器 "all" 采用其后面的三个其他过滤器,并要求它们对于要包含的要素都为真:要素必须具有等于 "street_limited" 的 class,其 admin_level 必须大于或等于 3,并且其类型不能是 Polygon。您可以将组合过滤器更改为 "any",以允许包含匹配任何这些条件的要素 - 是 Polygon 但具有不同 class 值的要素,等等。

[
    "all",
    ["==", "class", "street_limited"],
    [">=", "admin_level", 3],
    ["!in", "$type", "Polygon"]
]
SDK 支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能0.10.02.0.12.0.0
has / !has0.19.04.1.03.3.0
Next
表达式