瓦片管理

瓦片是地图的基础图层，ThMap 提供了一系列方法来管理瓦片图层。

addTile

添加瓦片图层到地图。

/**
 * 添加瓦片图层
 * @param {string} key - 唯一标识
 * @param {thmap.TileOptions} options - 瓦片配置
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
addTile(key, options = {})

参数说明

参数	类型	描述
key	string	瓦片图层的唯一标识，用于后续操作该图层
options	thmap.TileOptions	瓦片图层的配置选项

TileOptions 详细配置

选项	类型	默认值	必填	描述
tiles	string | string[]		是	瓦片 URL 模板或 URL 数组
beforeId	string		否	在指定图层之前添加

示例

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

// 添加多个瓦片图层
map.addTile('satellite-tile', {
  tiles: [
    'https://server1.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    'https://server2.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'
  ],
  beforeId: 'base-tile'
})

getTile

获取指定的瓦片图层实例。

/**
 * 获取瓦片图层
 * @param {string} key - 唯一标识
 * @returns {UrlTemplateLayer} - 瓦片图层实例
 */
getTile(key)

参数说明

参数	类型	描述
key	string	瓦片图层的唯一标识

示例

const tile = map.getTile('base-tile')
// 访问瓦片图层的属性或方法
console.log(tile.options.opacity)

removeTile

移除瓦片图层。

/**
 * 移除瓦片图层
 * @param {string} [key] - 唯一标识，不提供则移除所有瓦片
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
removeTile(key)

参数说明

参数	类型	描述
key	string	可选，瓦片图层的唯一标识，不提供则移除所有瓦片

示例

// 移除特定瓦片图层
map.removeTile('base-tile')

// 移除所有瓦片图层
map.removeTile()

setTileVisibility

设置瓦片图层的可见性。

/**
 * 设置瓦片可见性
 * @param {layer.VisibilityEnum} visibility - 可见性状态 ('visible' 或 'none')
 * @param {string} [key] - 唯一标识，不提供则设置所有瓦片
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
setTileVisibility(visibility, key)

参数说明

参数	类型	描述
visibility	'visible' | 'none'	可见性状态
key	string	可选，瓦片图层的唯一标识，不提供则设置所有瓦片

示例

// 显示特定瓦片图层
map.setTileVisibility('visible', 'base-tile')

// 隐藏特定瓦片图层
map.setTileVisibility('none', 'satellite-tile')

// 显示所有瓦片图层
map.setTileVisibility('visible')

瓦片图层操作示例

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

// 添加卫星瓦片图层
map.addTile('satellite-tile', {
  tiles: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
  beforeId: 'base-tile'
})

// 切换瓦片图层可见性
function toggleSatellite() {
  const satellite = map.getTile('satellite-tile')
  if (satellite.options.layout.visibility === 'visible') {
    map.setTileVisibility('none', 'satellite-tile')
  } else {
    map.setTileVisibility('visible', 'satellite-tile')
  }
}

// 注册按钮点击事件
document.getElementById('toggle-satellite').addEventListener('click', toggleSatellite)

常见问题

1. 瓦片不显示：检查瓦片 URL 是否正确，确保网络连接正常。

2. 瓦片加载缓慢：考虑使用 CDN 或优化瓦片服务器。

3. 缩放级别问题：确保设置了正确的 minzoom 和 maxzoom。

4. 图层顺序：使用 beforeId 参数控制图层顺序。