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迁移指南

根属性

MapLibre样式的根级属性指定了地图的图层、瓦片源和其他资源,以及在其他地方未指定时初始相机位置的默认值;

{
    "version": 8,
    "name": "MapLibre Demo Tiles",
    "sprite": "https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite",
    "glyphs": "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",
    "sources": {... },
    "layers": [...]
}

version

必需的枚举值。

样式规范版本号。必须为8;

version: 8

name

可选字符串。

样式的人类可读名称;

name: "Bright"

metadata

可选。

与样式表一起跟踪的任意属性,但不影响渲染。属性应加前缀以避免冲突,如'maplibre:';

metadata: {
    "styleeditor:slimmode": true,
    "styleeditor:comment": "Style generated 1677776383",
    "styleeditor:version": "3.14.159265",
    "example:object": {
        "String": "one",
        "Number": 2,
        "Boolean": false
    }
}

center

可选数组。

默认地图中心的经度和纬度。仅当地图未通过其他方式定位(例如地图选项或用户交互)时,样式中心才会被使用;

center: [-73.9749, 40.7736]

centerAltitude

可选数值。

默认地图中心高度,以海平面以上米为单位。样式中心高度定义了相机所看的高度,仅当地图未通过其他方式定位(例如地图选项或用户交互)时才会被使用;

centerAltitude: 123.4
SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能5.0.0❌ (#2980)❌ (#2980)

zoom

可选数值。

默认缩放级别。仅当地图未通过其他方式定位(例如地图选项或用户交互)时,样式缩放才会被使用;

zoom: 12.5

bearing

可选数值。单位为度。默认为0。

默认方位角,以度为单位。方位角是指"向上"的指南针方向;例如,90°的方位角将地图定向为东向上。仅当地图未通过其他方式定位(例如地图选项或用户交互)时,此值才会被使用;

bearing: 29

pitch

可选数值。单位为度。默认为0。

默认倾斜角,以度为单位。零度垂直于表面,直视地图,而较大的值如60度则向前看向地平线。仅当地图未通过其他方式定位(例如地图选项或用户交互)时,样式倾斜角才会被使用;

pitch: 50
SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
0-60度0.8.01.0.01.0.0
0-85度2.0.0❌ (#1909)❌ (#1909)
0-180度5.0.0❌ (#1909)❌ (#1909)

roll

可选数值。单位为度。默认为0。

默认翻滚角,以度为单位。翻滚角围绕相机视线轴按逆时针方向测量。仅当地图未通过其他方式定位(例如地图选项或用户交互)时,样式翻滚角才会被使用;

roll: 45
SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能5.0.0❌ (#2941)❌ (#2941)

state

可选状态。默认为{}。

用于在使用global-state表达式时定义默认值的对象;

state: {
    "chargerType": {"default": ["CCS", "CHAdeMO", "Type2"]},
    "minPreferredChargingSpeed": {"default": 50}
}
SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能❌ (#4964)❌ (#3302)❌ (#3302)

light

可选光照。

全局光源;

light: {"anchor": "viewport", "color": "white", "intensity": 0.4}

sky

可选天空。

地图的天空配置。**注意:**这个定义仍在实验中,正在maplibre-gl-js中开发;

sky: {
    "sky-color": "#199EF3",
    "sky-horizon-blend": 0.5,
    "horizon-color": "#ffffff",
    "horizon-fog-blend": 0.5,
    "fog-color": "#0000ff",
    "fog-ground-blend": 0.5,
    "atmosphere-blend": [
        "interpolate",
        ["linear"],
        ["zoom"],
        0,
        1,
        10,
        1,
        12,
        0
    ]
}

projection

可选投影。

投影配置;

projection: {
    "type": [
        "interpolate",
        ["linear"],
        ["zoom"],
        10,
        "vertical-perspective",
        12,
        "mercator"
    ]
}

terrain

可选地形。

地形配置;

terrain: {"source": "raster-dem-source", "exaggeration": 0.5}

sources

必需的数据源。

数据源指定地图应显示哪些数据。使用type属性指定源的类型。仅添加源不足以使数据显示在地图上,因为源不包含样式细节,如颜色或宽度。图层引用源并赋予其视觉表示。这使得可以以不同方式样式化同一源,例如在高速公路图层中区分不同类型的道路;

瓦片源(矢量和栅格)必须根据TileJSON规范指定其详细信息;

sources: {
    "maplibre-demotiles": {
        "type": "vector",
        "url": "https://demotiles.maplibre.org/tiles/tiles.json"
    },
    "maplibre-tilejson": {
        "type": "vector",
        "url": "http://api.example.com/tilejson.json"
    },
    "maplibre-streets": {
        "type": "vector",
        "tiles": [
            "http://a.example.com/tiles/{z}/{x}/{y}.pbf",
            "http://b.example.com/tiles/{z}/{x}/{y}.pbf"
        ],
        "maxzoom": 14
    },
    "wms-imagery": {
        "type": "raster",
        "tiles": [
            "http://a.example.com/wms?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&width=256&height=256&layers=example"
        ],
        "tileSize": 256
    }
}

sprite

可选精灵图。

{id: 'my-sprite', url: 'https://example.com/sprite'}对象数组。每个对象应代表一个唯一的URL,用于加载精灵图,以及一个唯一的ID,用作从该精灵图引用图像时的前缀(即'my-sprite:image')。所有URL内部都会扩展以加载.json和.png文件。如果id字段等于'default',则省略前缀(只使用'image'而不是'default:image')。所有ID和URL必须唯一。为了向后兼容,也可以提供一个表示URL的单个字符串,用于加载精灵图。在这种情况下,图像不会添加前缀;

sprite: "https://demotiles.maplibre.org/styles/osm-bright-gl-style/sprite"

glyphs

可选字符串。

用于加载PBF格式的符号集的URL模板;

如果设置了此属性,则text-field布局属性中的任何文本都将根据此属性指定的URL上的字形,使用text-font布局属性命名的字体堆栈显示。否则,字体将由text-font属性基于本地环境确定;

URL必须包括:

  • {fontstack} - 请求字形时,此令牌将被符号图层的text-font属性中指定的字体堆栈的逗号分隔列表替换。
  • {range} - 请求字形时,此令牌将被256个Unicode码点的范围替换。例如,要加载Unicode基本拉丁语和基本拉丁语-1补充块的字形,范围将为0-255。实际加载的范围是在运行时根据需要显示的文本确定的;

URL必须是绝对的,包含方案、权限和路径组件;

glyphs: "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf"
SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能0.0.160.1.10.1.0
省略以使用本地字体❌ (#3302)❌ (#165)❌ (#165)

transition

可选过渡。

全局过渡定义,用作属性间的默认值,在没有设置特定属性的过渡时,用于一个值到下一个值之间的过渡时序。基于碰撞的符号淡入淡出独立于样式的transition属性控制;

transition: {"duration": 300, "delay": 0}

layers

必需的数组。

样式的layers属性列出了该样式中可用的所有图层。图层类型由type属性指定,必须是以下类型之一:background、fill、line、symbol、raster、circle、fill-extrusion、heatmap、hillshade、color-relief;

除了background类型的图层外,每个图层都需要引用一个源。图层从源获取数据,可选择性地过滤要素,然后定义这些要素的样式;

layers: [
    {
        "id": "coastline",
        "source": "maplibre",
        "source-layer": "countries",
        "type": "line",
        "paint": {"line-color": "#198EC8"}
    }
]
Prev
投影
Next
天空