ThMap

Appearance

ThMap 整体使用 ​

本节介绍如何整体使用 ThMap 类，包括创建地图实例、添加各种组件以及事件处理等。

基本使用流程 ​

  1. 引入 ThMap 类
  2. 创建地图实例
  3. 添加地图组件（瓦片、标记、弹窗等）
  4. 添加事件监听器
  5. 清理地图资源

完整示例 ​

javascript
// 1. 引入 ThMap 类
import { ThMap } from '@/classes/ThMap/ThMap'

// 2. 创建地图实例
const map = new ThMap('#map-container', {
  center: [116.397228, 39.907556],  // 北京天安门坐标
  zoom: 12,
  minZoom: 5,
  maxZoom: 18
})

// 3. 添加地图组件

// 添加瓦片图层
map.addTile('base-tile', {
  tiles: ['https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'],
  beforeId: 'other-layer'
})

// 添加标记
map.addMarker('center-marker', {
  position: [116.397228, 39.907556],
  icon: 'path/to/marker.png',
  size: [30, 30]
})

// 添加弹窗
map.addPopup('info-popup', {
  content: '<div style="padding: 10px;">这是北京天安门</div>',
  position: [116.397228, 39.907556],
  offset: [0, -10]
})

// 添加控制器
map.addControl('navigation', {
  position: 'top-right'
})
map.addControl('scale', {
  unit: 'metric'
})

// 4. 添加事件监听器
map.instance.on('click', (e) => {
  console.log('点击位置:', e.lngLat)
  
  // 在点击位置显示弹窗
  map.addPopup('click-popup', {
    content: `<div>坐标: ${e.lngLat.lng}, ${e.lngLat.lat}</div>`,
    position: [e.lngLat.lng, e.lngLat.lat]
  })
})

// 5. 清理地图资源
// 当不再需要地图时
// map.remove()

链式调用 ​

ThMap 类的大部分方法都支持链式调用，可以简化代码：

javascript
map
  .addTile('base-tile', {
    tiles: ['https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png']
  })
  .addMarker('center-marker', {
    position: [116.397228, 39.907556]
  })
  .addControl('navigation')
  .addControl('scale')

组件管理 ​

可以通过对应的方法管理地图组件：

javascript
// 获取组件
const tile = map.getTile('base-tile')
const marker = map.getMarker('center-marker')

// 设置可见性
map.setTileVisibility('none', 'base-tile')
map.setMarkerVisibility('visible', 'center-marker')

// 移除特定组件
map.removeTile('base-tile')
map.removeMarker('center-marker')

// 移除所有组件
map.removeTile()
map.removeMarker()
map.removePopup()
map.removeControl()

// 移除整个地图
map.remove()

事件处理 ​

ThMap 继承了 MapBox 的事件系统，可以监听各种地图事件：

javascript
// 监听点击事件
map.instance.on('click', (e) => {
  console.log('点击位置:', e.lngLat)
})

// 监听移动事件
map.instance.on('move', () => {
  console.log('地图中心:', map.instance.getCenter())
  console.log('当前缩放级别:', map.instance.getZoom())
})

// 移除事件监听器
const handleClick = (e) => {
  console.log('点击位置:', e.lngLat)
}
map.instance.on('click', handleClick)
// 移除监听器
map.instance.off('click', handleClick)

常见问题 ​

  1. 地图不显示：检查容器是否有足够的高度，确保地图配置正确。

  2. 组件不显示：检查组件是否添加成功，坐标是否在当前视野范围内。

  3. 性能优化：对于大量标记或复杂图层，考虑使用批量添加或图层分组。

  4. 资源释放：当不再需要地图时，调用 map.remove() 释放资源。