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

数据源

数据源指定地图应显示哪些数据。使用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
    }
}

vector

矢量瓦片数据源。瓦片必须是Mapbox矢量瓦片格式。矢量瓦片中的所有几何坐标必须在-1 * extent和(extent * 2) - 1之间(包含边界值)。所有使用矢量源的图层必须指定source-layer值;

sources: {
    "maplibre-streets": {
        "type": "vector",
        "tiles": [
            "http://a.example.com/tiles/{z}/{x}/{y}.pbf"
        ]
    }
}
SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能0.10.02.0.12.0.0

type

必需的枚举值。可能的值:vector。

源的类型;

  • vector:矢量瓦片源;

url

可选字符串。

指向TileJSON资源的URL。支持的协议是http:和https:;

tiles

可选数组。

一个或多个瓦片源URL的数组,如TileJSON规范中所述;

bounds

可选数组。默认为[-180,-85.051129,180,85.051129]。

一个包含源边界框的西南角和东北角的经度和纬度的数组,顺序如下:[sw.lng, sw.lat, ne.lng, ne.lat]。当源中包含此属性时,MapLibre不会请求给定边界之外的瓦片;

scheme

可选枚举值。可能的值:xyz、tms。默认为"xyz"。

影响瓦片坐标的y方向。假定使用全球墨卡托(又称球面墨卡托)配置;

  • xyz:滑动地图瓦片名称方案;
  • tms:OSGeo规范方案;

minzoom

可选数值。默认为0。

可用瓦片的最小缩放级别,如TileJSON规范中所述;

maxzoom

可选数值。默认为22。

可用瓦片的最大缩放级别,如TileJSON规范中所述。在更高缩放级别显示地图时,将使用maxzoom级别的瓦片数据;

attribution

可选字符串。

包含在向用户显示地图时要显示的归属信息;

promoteId

可选promoteId。

用作要素ID(用于要素状态)的属性。可以是属性名称,或形式为{<sourceLayer>: <propertyName>}的对象。如果为矢量瓦片源指定为字符串,则在其所有源图层中使用相同的属性;

volatile

可选布尔值。默认为false。

用于确定源的瓦片是否在本地缓存的设置;

SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能未计划9.3.05.10.0

raster

栅格瓦片数据源;

sources: {
    "maplibre-satellite": {
        "type": "raster",
        "tiles": [
            "http://a.example.com/tiles/{z}/{x}/{y}.png"
        ],
        "tileSize": 256
    }
}
SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能0.10.02.0.12.0.0

type

必需的枚举值。可能的值:raster。

源的类型;

  • raster:栅格瓦片源;

url

可选字符串。

指向TileJSON资源的URL。支持的协议是http:和https:;

tiles

可选数组。

一个或多个瓦片源URL的数组,如TileJSON规范中所述;

bounds

可选数组。默认为[-180,-85.051129,180,85.051129]。

一个包含源边界框的西南角和东北角的经度和纬度的数组,顺序如下:[sw.lng, sw.lat, ne.lng, ne.lat]。当源中包含此属性时,MapLibre不会请求给定边界之外的瓦片;

minzoom

可选数值。默认为0。

可用瓦片的最小缩放级别,如TileJSON规范中所述;

maxzoom

可选数值。默认为22。

可用瓦片的最大缩放级别,如TileJSON规范中所述。在更高缩放级别显示地图时,将使用maxzoom级别的瓦片数据;

tileSize

可选数值。默认为512。

瓦片的大小。单位为像素。如果未指定,默认为512;

scheme

可选枚举值。可能的值:xyz、tms。默认为"xyz"。

影响瓦片坐标的y方向。假定使用全球墨卡托(又称球面墨卡托)配置;

  • xyz:滑动地图瓦片名称方案;
  • tms:OSGeo规范方案;

attribution

可选字符串。

包含在向用户显示地图时要显示的归属信息;

volatile

可选布尔值。默认为false。

用于确定源的瓦片是否在本地缓存的设置;

SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能未计划9.3.05.10.0

raster-dem

栅格DEM(数字高程模型)瓦片;

sources: {
    "maplibre-terrain": {
        "type": "raster-dem",
        "url": "https://demotiles.maplibre.org/terrain-tiles/tiles.json"
    }
}
SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能0.43.06.0.04.0.0

type

必需的枚举值。可能的值:raster-dem。

源的类型;

  • raster-dem:栅格DEM源;

url

可选字符串。

指向TileJSON资源的URL。支持的协议是http:和https:;

tiles

可选数组。

一个或多个瓦片源URL的数组,如TileJSON规范中所述;

bounds

可选数组。默认为[-180,-85.051129,180,85.051129]。

一个包含源边界框的西南角和东北角的经度和纬度的数组,顺序如下:[sw.lng, sw.lat, ne.lng, ne.lat]。当源中包含此属性时,MapLibre不会请求给定边界之外的瓦片;

minzoom

可选数值。默认为0。

可用瓦片的最小缩放级别,如TileJSON规范中所述;

maxzoom

可选数值。默认为22。

可用瓦片的最大缩放级别,如TileJSON规范中所述。在更高缩放级别显示地图时,将使用maxzoom级别的瓦片数据;

tileSize

可选数值。默认为512。

瓦片的大小。单位为像素。如果未指定,默认为512;

attribution

可选字符串。

包含在向用户显示地图时要显示的归属信息;

encoding

可选枚举值。可能的值:terrarium、mapbox。默认为"mapbox"。

栅格DEM编码格式。

  • terrarium:红色通道 * 256 + 绿色通道 + 蓝色通道 / 256 - 32768;
  • mapbox:(红色通道 * 256 * 256 + 绿色通道 * 256 + 蓝色通道) - 10000;

redFactor

可选数值。默认为1。

控制红色通道在编码方程中如何使用的因子。与blueFactor和greenFactor一起,这可以用来创建与内置编码不同的自定义编码格式;

blueFactor

可选数值。默认为1 / 256(对于mapbox编码)或1 / 256(对于terrarium编码)。

控制蓝色通道在编码方程中如何使用的因子。与redFactor和greenFactor一起,这可以用来创建与内置编码不同的自定义编码格式;

greenFactor

可选数值。默认为1(对于mapbox编码)或1(对于terrarium编码)。

控制绿色通道在编码方程中如何使用的因子。与redFactor和blueFactor一起,这可以用来创建与内置编码不同的自定义编码格式;

baseShift

可选数值。默认为-10000(对于mapbox编码)或-32768(对于terrarium编码)。

添加到编码方程中的值。与自定义因子一起,这可以用来创建与内置编码不同的自定义编码格式;

volatile

可选布尔值。默认为false。

用于确定源的瓦片是否在本地缓存的设置;

SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能未计划9.3.05.10.0

geojson

GeoJSON数据源。数据必须通过"data"属性提供,其值可以是URL或内联GeoJSON。在浏览器中使用时,GeoJSON数据必须与地图位于同一域,或者带有CORS头;

sources: {
    "geojson-marker": {
        "type": "geojson",
        "data": {
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [12.550343, 55.665957]
            },
            "properties": {
                "title": "Somewhere",
                "marker-symbol": "monument"
            }
        }
    },
    "geojson-lines": {
        "type": "geojson",
        "data": "./lines.geojson"
    }
}
SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能0.10.02.0.12.0.0
聚类0.14.04.2.03.4.0
线距离度量0.45.06.5.04.4.0

type

必需的枚举值。可能的值:geojson。

GeoJSON源的数据类型;

  • geojson:GeoJSON数据源;

data

必需的。

指向GeoJSON文件的URL,或内联GeoJSON;

maxzoom

可选数值。默认为18。

创建矢量瓦片的最大缩放级别(更高意味着在高缩放级别有更多细节);

attribution

可选字符串。

包含在向用户显示地图时要显示的归属信息;

buffer

可选范围为[0, 512]的数值。默认为128。

每侧的瓦片缓冲区大小。值为0不产生缓冲区。值为512产生与瓦片本身一样宽的缓冲区。较大的值在瓦片边缘附近产生较少的渲染伪影但性能较慢;

filter

可选。

用于在渲染之前过滤要素的表达式;

tolerance

可选数值。默认为0.375。

Douglas-Peucker简化容差(更高意味着更简单的几何形状和更快的性能);

cluster

可选布尔值。默认为false。

如果数据是点要素集合,将此设置为true会按半径将点聚类成组。聚类组成为源中的新Point要素,具有以下附加属性:

  • cluster 如果点是聚类,则为true
  • cluster_id 聚类的唯一ID,用于与聚类检查方法结合使用
  • point_count 聚集到此聚类中的原始点数
  • point_count_abbreviated 缩写的点数

clusterRadius

可选范围为[0, ∞)的数值。默认为50。

如果启用聚类,每个聚类的半径。值为512表示半径等于瓦片宽度;

clusterMaxZoom

可选数值。

如果启用聚类,点聚类的最大缩放级别。默认为比maxzoom少一级(这样最后一级缩放的要素不会被聚类)。聚类在整数缩放级别重新评估,因此将clusterMaxZoom设置为14意味着聚类将显示到z15;

clusterMinPoints

可选数值。

如果启用聚类,形成聚类所需的最少点数。默认为2;

clusterProperties

可选。

如果启用聚类,定义生成的聚类上的自定义属性,从聚类点聚合值。格式为{"property_name": [operator, map_expression]}。operator是接受至少2个操作数的任何表达式函数(例如"+"或"max")——它累积聚类包含的聚类/点的属性值;map_expression产生单个点的值;

示例:{"sum": ["+", ["get", "scalerank"]]};

对于更高级的用例,可以使用引用特殊["accumulated"]值的自定义reduce表达式代替operator,例如:

{"sum": [["+", ["accumulated"], ["get", "sum"]], ["get", "scalerank"]]};

lineMetrics

可选布尔值。默认为false。

是否计算线距离度量。对于指定line-gradient值的线图层,这是必需的;

generateId

可选布尔值。默认为false。

是否为geojson要素生成ID。启用后,feature.id属性将根据其在features数组中的索引自动分配,覆盖之前的任何值;

promoteId

可选promoteId。

用作要素ID(用于要素状态)的属性。可以是属性名称,或形式为{<sourceLayer>: <propertyName>}的对象;

video

视频数据源。urls值是一个数组。对于数组中的每个URL,将创建一个视频元素源。为了在浏览器之间支持视频,请提供多种格式的URL;

coordinates数组包含顺时针列出的视频角落的[经度, 纬度]对:左上角、右上角、右下角、左下角;

当渲染为栅格图层时,图层的raster-fade-duration属性将使视频淡入。这发生在播放开始、暂停和恢复时,或者当视频的坐标更新时。要避免这种行为,将图层的raster-fade-duration属性设置为0;

sources: {
    "video": {
        "type": "video",
        "urls": [
            "https://static-assets.mapbox.com/mapbox-gl-js/drone.mp4",
            "https://static-assets.mapbox.com/mapbox-gl-js/drone.webm"
        ],
        "coordinates": [
            [-122.51596391201019, 37.56238816766053],
            [-122.51467645168304, 37.56410183312965],
            [-122.51309394836426, 37.563391708549425],
            [-122.51423120498657, 37.56161849366671]
        ]
    }
}
SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能0.10.0尚不支持尚不支持

type

必需的枚举值。可能的值:video。

视频源的数据类型;

  • video:视频数据源;

urls

必需的数组。

按首选格式顺序排列的视频内容URL;

coordinates

必需的数组。

视频的角落,以经度、纬度对指定;

image

图像数据源。url值包含图像位置。coordinates数组包含顺时针列出的图像角落的[经度, 纬度]对:左上角、右上角、右下角、左下角;

sources: {
    "image": {
        "type": "image",
        "url": "https://maplibre.org/maplibre-gl-js/docs/assets/radar.gif",
        "coordinates": [
            [-80.425, 46.437],
            [-71.516, 46.437],
            [-71.516, 37.936],
            [-80.425, 37.936]
        ]
    }
}
SDK支持MapLibre GL JSMapLibre Native AndroidMapLibre Native iOS
基本功能0.10.05.2.03.7.0

type

必需的枚举值。可能的值:image。

图像源的数据类型;

  • image:图像数据源;

url

必需的字符串。

指向图像的URL;

coordinates

必需的数组。

图像的角落,以经度、纬度对指定;

Prev
天空
Next
精灵图