ThMap

Appearance

图片叠加 ​

ThMap 支持在地图上叠加图片，适用于显示自定义覆盖物、标注等场景。

addImg ​

添加图片图层到地图。

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

参数说明 ​

参数类型描述
keystring图片图层的唯一标识，用于后续操作该图层
optionsthmap.ImageOptions图片图层的配置选项

ImageOptions 详细配置 ​

选项类型默认值必填描述
urlstring是图片 URL
coordinates[[number, number], [number, number], [number, number], [number, number]]是图片四个角的坐标，顺序为 [左上, 右上, 右下, 左下]
beforeIdstring否在指定图层之前添加

示例 ​

javascript
// 添加图片图层
map.addImg('overlay-image', {
  url: 'path/to/image.png',
  coordinates: [
    [116.3, 39.9],  // 左上
    [116.4, 39.9],  // 右上
    [116.4, 39.8],  // 右下
    [116.3, 39.8]   // 左下
  ]
})

getImg ​

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

javascript
/**
 * 获取图片图层
 * @param {string} key - 唯一标识
 * @returns {ImageLayer} - 图片图层实例
 */
getImg(key)

参数说明 ​

参数类型描述
keystring图片图层的唯一标识

示例 ​

javascript
const img = map.getImg('overlay-image')
// 访问图片图层的属性或方法
console.log(img.options.opacity)

removeImg ​

移除图片图层。

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

参数说明 ​

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

示例 ​

javascript
// 移除特定图片图层
map.removeImg('overlay-image')

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

setImgVisibility ​

设置图片图层的可见性。

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

参数说明 ​

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

示例 ​

javascript
// 显示特定图片图层
map.setImgVisibility('visible', 'overlay-image')

// 隐藏特定图片图层
map.setImgVisibility('none', 'overlay-image')

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

图片叠加操作示例 ​

javascript
// 添加图片图层
map.addImg('map-overlay', {
  url: 'path/to/map-overlay.png',
  coordinates: [
    [116.2, 40.0],
    [116.5, 40.0],
    [116.5, 39.8],
    [116.2, 39.8]
  ]
})

// 切换图片可见性
function toggleOverlay() {
  const overlay = map.getImg('map-overlay')
  if (overlay.options.layout.visibility === 'visible') {
    map.setImgVisibility('none', 'map-overlay')
  } else {
    map.setImgVisibility('visible', 'map-overlay')
  }
}

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

常见问题 ​

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

  2. 图片变形：确保 coordinates 参数中的四个点坐标正确，形成一个矩形。

  3. 图片层级：使用 zIndex 参数控制图片图层的显示层级。

  4. 性能问题：对于大图片，考虑优化图片大小或使用矢量图形替代。