基础操作

地图实例（map）提供丰富的视角控制与事件监听方法，这些方法继承自 MapLibre GL JS。

视角控制

// 获取/设置地图中心点
const center = map.getCenter()
map.setCenter([116.4, 39.9])

// 缩放到指定级别
map.zoomTo(15)

// 飞行动画跳转
map.flyTo({
  center: [116.4, 39.9],
  zoom: 15,
  pitch: 45,
  bearing: 0,
  duration: 1500   // 动画时长（毫秒）
})

// 瞬间跳转（无动画）
map.jumpTo({
  center: [116.4, 39.9],
  zoom: 15
})

// 适配到指定边界
map.fitBounds([[116.35, 39.88], [116.45, 39.93]], {
  padding: { top: 40, bottom: 40, left: 40, right: 40 }
})

// 获取当前地图边界
const bounds = map.getBounds()

// 获取/设置倾斜角
const pitch = map.getPitch()
map.setPitch(45)

// 获取/设置旋转角
const bearing = map.getBearing()
map.setBearing(30)

// 获取当前缩放级别
const zoom = map.getZoom()

图层控制

// 显示/隐藏图层
map.setLayoutProperty('layer-id', 'visibility', 'visible')
map.setLayoutProperty('layer-id', 'visibility', 'none')

// 修改图层透明度
map.setPaintProperty('layer-id', 'fill-opacity', 0.5)

// 检查图层是否存在
const exists = map.getLayer('layer-id') !== undefined

事件监听

// 地图加载完成
map.on('load', () => {
  console.log('地图已加载')
})

// 地图点击事件
map.on('click', (e) => {
  const { lng, lat } = e.lngLat
  console.log(`点击位置: [${lng}, ${lat}]`)
})

// 地图移动事件
map.on('move', () => {
  const center = map.getCenter()
})

// 缩放变化
map.on('zoom', () => {
  const zoom = map.getZoom()
})

// 移除事件监听
const handler = (e) => { /* ... */ }
map.on('click', handler)
map.off('click', handler)

销毁

// 组件卸载时调用，释放所有资源
map.remove()