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

Map 类

MapLibre GL JS 的核心组件,用于创建和管理地图;

示例

const map = new maplibregl.Map({
    container: 'map', // HTML 容器 ID
    style: 'https://demotiles.maplibre.org/style.json', // 样式 URL
    center: [0, 0], // 初始中心点 [经度, 纬度]
    zoom: 1 // 初始缩放级别
});

访问器

repaint

触发地图的重绘; 当样式属性发生改变时通常会自动触发重绘,因此很少需要手动调用此方法;

showCollisionBoxes

设置为 true 可显示所有碰撞盒和碰撞圆; 碰撞盒用于标记符号图层中标签间的碰撞区域,以及它们与其他符号的碰撞区域,可用于调试;

showOverdrawInspector

设置为 true 可显示重绘区域检查器; 这将可视化每个像素被重绘的次数(通过颜色编码);

showPadding

设置为 true 可将当前的 padding 边界可视化; 这对于调试 map.fitBounds, map.jumpTo 等方法很有用;

showTileBoundaries

设置为 true 可显示图块边界; 这对于调试渲染问题很有用;

version

获取当前 MapLibre GL JS 的版本号;

事件

off()

移除以前通过 on 或 once 注册的事件监听器;

on()

为指定类型的事件添加一个监听器;

once()

为指定类型的事件添加一个只会触发一次的监听器; 触发后该监听器会被自动移除;

方法

addControl()

向地图添加控件;

addImage()

将图像添加到地图的样式; 此图像可使用在样式的精灵图中的图像 ID,配合 icon-image、background-pattern、fill-pattern 或 line-pattern 在地图上显示;

addLayer()

向地图的样式添加一个 Mapbox 样式层;

addSource()

向地图的样式添加一个数据源;

addSprite()

向地图添加一个精灵; 精灵是用于在地图上渲染图标和图案的图像集合;

areTilesLoaded()

返回一个布尔值,表示是否所有图块都已加载完成;

calculateCameraOptionsFromCameraLngLatAltRotation()

计算相机位置的选项参数;

calculateCameraOptionsFromTo()

计算从一个地理位置到另一个地理位置的相机选项;

cameraForBounds()

返回用于将给定边界完全显示在地图上的 CameraOptions 对象;

easeTo()

使用平滑过渡动画将地图平移、缩放、旋转到指定位置;

fitBounds()

平移和缩放地图以包含指定的地理边界,使用平滑动画过渡;

fitScreenCoordinates()

使用平滑动画过渡,调整地图视图使两个屏幕坐标位于地图容器的指定位置;

flyTo()

使用平滑的透视动画将地图移动到指定位置;

getBearing()

获取地图的当前方位角;

getBounds()

获取地图的地理边界;

getCameraTargetElevation()

获取相机目标点的高程(基于地形数据,如果存在);

getCanvas()

获取地图的 HTML 画布元素;

getCanvasContainer()

获取包含地图的 HTML 元素;

getCenter()

获取地图的地理中心点;

getCenterClampedToGround()

获取地图的地理中心点(与地面对齐);

getCenterElevation()

获取地图中心点的高程;

getContainer()

获取包含地图的 HTML 元素;

getFeatureState()

获取指定要素的状态;

getFilter()

获取指定样式图层的过滤器;

getGlyphs()

获取用于向地图添加文本的字形URL模式;

getImage()

获取已添加到地图样式中的图像数据;

getLayer()

获取样式层属性;

getLayersOrder()

获取此地图实例的所有样式层顺序;

getLayoutProperty()

获取指定样式层的布局属性;

getLight()

获取地图的光照属性;

getMaxBounds()

获取地图的最大边界;

getMaxPitch()

获取地图的最大倾斜角度;

getMaxZoom()

获取地图的最大缩放级别;

getMinPitch()

获取地图的最小倾斜角度;

getMinZoom()

获取地图的最小缩放级别;

getPadding()

获取地图的内边距;

getPaintProperty()

获取指定样式层的绘制属性;

getPitch()

获取地图的倾斜角度;

getPixelRatio()

获取地图的像素比例;

getProjection()

获取地图的投影设置;

getRenderWorldCopies()

返回一个布尔值,表示是否应绘制世界副本;

getRoll()

获取地图的横滚角度;

getSky()

获取地图的天空属性;

getSource()

获取数据源属性;

getSprite()

获取用于在地图中绘制图像的精灵URL;

getStyle()

获取地图的样式对象;

getTerrain()

获取地图的地形定义;

getVerticalFieldOfView()

获取地图的垂直视场角;

getZoom()

获取地图的缩放级别;

hasControl()

返回指定控件是否已添加到地图;

hasImage()

返回指定图像是否存在;

isMoving()

返回地图当前是否处于移动状态;

isRotating()

返回地图当前是否处于旋转状态;

isSourceLoaded()

返回指定的数据源是否已加载;

isStyleLoaded()

返回地图样式是否已完全加载;

isZooming()

返回地图当前是否处于缩放状态;

jumpTo()

立即将地图移动到指定位置,不使用过渡动画;

listens()

返回地图是否有指定类型的监听器;

listImages()

返回地图样式中所有已注册图像的ID;

loaded()

返回地图是否已完全加载;

loadImage()

从URL加载图像并注册到地图中;

moveLayer()

将一个已有层移动到另一个层的前面或后面;

panBy()

使用平滑动画将地图平移指定距离;

panTo()

使用平滑动画将地图平移到指定位置;

project()

将地理坐标投影为相对于地图容器左上角的像素坐标;

queryRenderedFeatures()

查询当前渲染在视图中的源要素;

querySourceFeatures()

查询指定数据源中匹配条件的要素;

queryTerrainElevation()

查询特定位置的地形高程;

redraw()

强制重绘地图;

refreshTiles()

刷新所有图块;

remove()

移除地图并清理所有资源;

removeControl()

从地图中移除指定控件;

removeFeatureState()

删除要素的状态;

removeImage()

从样式中删除指定图像;

removeLayer()

从地图的样式中删除指定图层;

removeSource()

从地图的样式中删除指定数据源;

removeSprite()

从地图中删除指定精灵;

resetNorth()

使用动画将地图旋转为正北方向;

resetNorthPitch()

使用动画将地图旋转为正北方向并恢复为0倾斜角度;

resize()

调整地图以适应其容器大小;

rotateTo()

使用平滑动画将地图旋转到指定方向;

setBearing()

设置地图方位角;

setCenter()

设置地图的地理中心点;

setCenterClampedToGround()

设置地图的地理中心点(与地面对齐);

setCenterElevation()

设置地图中心点的高程;

setEventedParent()

设置事件的父对象,以允许相对定位;

setFeatureState()

设置要素的状态;

setFilter()

设置指定样式层的过滤器;

setGlyphs()

设置用于向地图添加文本的字形URL模式;

setLayerZoomRange()

设置样式层的最小和最大缩放级别;

setLayoutProperty()

设置指定样式层的布局属性;

setLight()

设置地图的光照属性;

setMaxBounds()

设置地图的最大边界;

setMaxPitch()

设置地图的最大倾斜角度;

setMaxZoom()

设置地图的最大缩放级别;

setMinPitch()

设置地图的最小倾斜角度;

setMinZoom()

设置地图的最小缩放级别;

setPadding()

设置地图的内边距;

setPaintProperty()

设置指定样式层的绘制属性;

setPitch()

设置地图的倾斜角度;

setPixelRatio()

设置地图的像素比例;

setProjection()

设置地图的投影;

setRenderWorldCopies()

设置当地图缩小到一定级别时是否应渲染世界副本;

setRoll()

设置地图的横滚角度;

setSky()

设置地图的天空属性;

setSourceTileLodParams()

设置数据源的图块细节级别参数;

setSprite()

设置用于在地图中绘制图像的精灵URL;

setStyle()

设置地图的样式;

setTerrain()

设置地图的地形;

setTransformRequest()

设置用于拦截和修改资源请求的回调;

setVerticalFieldOfView()

设置地图的垂直视场角;

setZoom()

设置地图的缩放级别;

snapToNorth()

如果轴向旋转足够小,使用动画将地图旋转为正北方向;

stop()

停止当前所有动画转换;

triggerRepaint()

强制地图重绘一次;

unproject()

将像素坐标投影为地理坐标;

updateImage()

更新样式中已存在的图像;

zoomIn()

将地图的缩放级别增加1;

zoomOut()

将地图的缩放级别减少1;

zoomTo()

将地图缩放到指定缩放级别;

属性

boxZoom

地图的 BoxZoomHandler,实现按住 Shift 键并拖动鼠标来进行缩放; 在 BoxZoomHandler 部分可以找到更多详细信息和示例;

cancelPendingTileRequestsWhileZooming

决定是否取消或保留当前视口中仍在加载但属于更远(更小)缩放级别的图块的地图属性;

  • 如果为 true,在放大时,未能加载完成的前一个缩放级别的图块将被取消; 这可能会为较慢的设备节省一些计算资源,但地图细节可能会在缩放结束时更突然地出现;
  • 如果为 false,在放大时,先前缩放级别的图块将继续加载并逐渐显示,提供更平滑的地图细节体验; 然而,在短时间内会渲染更多的图块;

默认值为 true;

cooperativeGestures

地图的 CooperativeGesturesHandler,当用户尝试缩放时允许显示协作手势信息; 在 CooperativeGesturesHandler 部分可以找到更多详细信息和示例;

doubleClickZoom

地图的 DoubleClickZoomHandler,允许用户通过双击进行缩放; 在 DoubleClickZoomHandler 部分可以找到更多详细信息和示例;

dragPan

地图的 DragPanHandler,实现使用鼠标或触摸手势拖动地图; 在 DragPanHandler 部分可以找到更多详细信息和示例;

dragRotate

地图的 DragRotateHandler,实现按住右键或按住 Control 键拖动时旋转地图; 在 DragRotateHandler 部分可以找到更多详细信息和示例;

keyboard

地图的 KeyboardHandler,允许用户使用键盘快捷键缩放、旋转和平移地图; 在 KeyboardHandler 部分可以找到更多详细信息和示例;

scrollZoom

地图的 ScrollZoomHandler,实现使用滚轮或触控板缩放地图; 在 ScrollZoomHandler 部分可以找到更多详细信息和示例;

touchPitch

地图的 TwoFingersTouchPitchHandler,允许用户使用触摸手势倾斜地图; 在 TwoFingersTouchPitchHandler 部分可以找到更多详细信息和示例;

touchZoomRotate

地图的 TwoFingersTouchZoomRotateHandler,允许用户使用触摸手势缩放或旋转地图; 在 TwoFingersTouchZoomRotateHandler 部分可以找到更多详细信息和示例;

transformCameraUpdate

用于延迟相机更新或应用任意约束的回调; 如果指定,这个 Camera 实例可以用作 React 等中的无状态组件;