ThMap 介绍
ThMap 是一个基于 MapBox 的地图工具类，提供了丰富的地图操作功能，包括瓦片管理、图片叠加、弹窗、标记和控制器等。
类概述
javascript
import { ThMap } from '@/classes/ThMap/ThMap'
// 创建地图实例
const map = new ThMap('map-container', {
// 配置选项
})构造函数
javascript
/**
* 构造函数
* @constructor
* @param {string | object} dom - 容器 DOM 元素或选择器
* @param {mapboxgl.MapOptions | object} options - 地图配置选项
*/
constructor(dom, options = {})参数说明
| 参数 | 类型 | 描述 |
|---|---|---|
| dom | string | object | 地图容器，可以是 DOM 元素对象或 CSS 选择器字符串 |
| options | mapboxgl.MapOptions | object | 地图配置选项，继承自 MapBox 的配置选项 |
options 详细配置
| 选项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| center | [number, number] | [0, 0] | 地图中心点坐标 [经度, 纬度] |
| zoom | number | 0 | 地图初始缩放级别 |
| minZoom | number | 0 | 地图最小缩放级别 |
| maxZoom | number | 22 | 地图最大缩放级别 |
| bearing | number | 0 | 地图初始旋转角度（度） |
| pitch | number | 0 | 地图初始倾斜角度（度） |
| interactive | boolean | true | 是否允许用户交互 |
| attributionControl | boolean | true | 是否显示归属控件 |
| compact | boolean | false | 是否使用紧凑样式 |
示例
javascript
// 使用 CSS 选择器
const map = new ThMap('#map-container', {
center: [116.397228, 39.907556],
zoom: 12
})
// 使用 DOM 元素
const container = document.getElementById('map-container')
const map = new ThMap(container, {
center: [116.397228, 39.907556],
zoom: 12,
minZoom: 5,
maxZoom: 18
})