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 等中的无状态组件;