热区管理

热区是地图上的多边形区域，用于高亮显示特定区域或实现区域选择等功能。

addPolygon

添加热区到地图。

/**
 * 添加热区
 * @param {string} key - 唯一标识
 * @param {thmap.PolygonOptions} options - 配置对象
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
addPolygon(key, options)

参数说明

参数	类型	描述
key	string	热区的唯一标识
options	thmap.PolygonOptions	热区的配置选项

PolygonOptions 详细配置

选项	类型	默认值	必填	描述
source	thmap.SourceData		否	数据源，可以是GeoJSON数据集合或数据源ID
beforeId	string		否	在某个图层之前的图层key
defaultColor	thmap.FeatureColor	transparent	否	默认颜色，填写颜色值（如："#fff"）或feature.properties中的属性名称
hoverColor	thmap.FeatureColor	rgba(105,164,236,0.3)	否	覆盖颜色，鼠标悬停时的填充颜色
activeColor	thmap.FeatureColor	rgba(105,164,236,0.5)	否	点击颜色，鼠标点击时的填充颜色
defaultLineColor	thmap.FeatureColor		否	默认边框颜色
hoverLineColor	thmap.FeatureColor		否	鼠标移入时响应的边框颜色
activeLineColor	thmap.FeatureColor		否	鼠标点击时响应的边框颜色
lineWidth	number	0	否	边框宽度
onMouseEnter	function		否	鼠标移入事件处理函数，参数为事件对象
onMouseMove	function		否	鼠标移动事件处理函数，参数为事件对象
onMouseLeave	function		否	鼠标移出事件处理函数，参数为事件对象
onClick	function		否	鼠标点击事件处理函数，参数为事件对象

示例

// 添加简单热区
map.addPolygon('area-polygon', {
  source: {
    type: 'geojson',
    data: {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [116.38, 39.90],
            [116.40, 39.90],
            [116.40, 39.91],
            [116.38, 39.91],
            [116.38, 39.90]
          ]
        ]
      }
    }
  },
  defaultColor: 'rgba(255, 0, 0, 0.2)',
  hoverColor: 'rgba(255, 0, 0, 0.4)',
  lineWidth: 2,
  defaultLineColor: '#ff0000',
  onClick: function(e) {
    console.log('点击了热区:', e);
  }
})

setPolygonData

设置热区数据。

/**
 * 设置热区数据
 * @param {string} key - 唯一标识
 * @param {thmap.SourceData} data - 热区数据
 * @returns {ThMap} - 返回 this 以支持链式调用
 */
setPolygonData(key, data)

参数说明

参数	类型	描述
key	string	热区的唯一标识
data	thmap.SourceData	热区数据，可以是GeoJSON数据或数据源ID

示例

// 更新热区数据
map.setPolygonData('area-polygon', {
  type: 'geojson',
  data: {
    type: 'Feature',
    geometry: {
      type: 'Polygon',
      coordinates: [
        [
          [116.37, 39.89],
          [116.41, 39.89],
          [116.41, 39.92],
          [116.37, 39.92],
          [116.37, 39.89]
        ]
      ]
    }
  }
})

getPolygon

获取指定的热区实例。

/**
 * 获取热区
 * @param {string} key - 唯一标识
 * @returns {PolygonLayer} - 热区实例
 */
getPolygon(key)

参数说明

参数	类型	描述
key	string	热区的唯一标识

示例

const polygon = map.getPolygon('area-polygon')
// 访问热区属性
console.log(polygon.options)

removePolygon

移除热区。

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

参数说明

参数	类型	描述
key	string | string[]	可选，热区的唯一标识，不提供则移除所有热区

示例

// 移除特定热区
map.removePolygon('area-polygon')

// 移除多个热区
map.removePolygon(['area-polygon1', 'area-polygon2'])

// 移除所有热区
map.removePolygon()

setPolygonVisibility

设置热区的显示状态。

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

参数说明

参数	类型	描述
visibility	string	显示状态，可选值: 'visible' (显示), 'none' (隐藏)
key	string | string[]	可选，热区的唯一标识，不提供则设置所有热区

示例

// 显示特定热区
map.setPolygonVisibility('visible', 'area-polygon')

// 隐藏多个热区
map.setPolygonVisibility('none', ['area-polygon1', 'area-polygon2'])

// 隐藏所有热区
map.setPolygonVisibility('none')

热区操作示例

// 添加热区并绑定事件
map.addPolygon('area-polygon', {
  source: {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          id: 'area1',
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [116.38, 39.90],
                [116.40, 39.90],
                [116.40, 39.91],
                [116.38, 39.91],
                [116.38, 39.90]
              ]
            ]
          },
          properties: {
            name: '区域1',
            color: 'rgba(255, 0, 0, 0.2)'
          }
        },
        {
          type: 'Feature',
          id: 'area2',
          geometry: {
            type: 'Polygon',
            coordinates: [
              [
                [116.40, 39.90],
                [116.42, 39.90],
                [116.42, 39.91],
                [116.40, 39.91],
                [116.40, 39.90]
              ]
            ]
          },
          properties: {
            name: '区域2',
            color: 'rgba(0, 255, 0, 0.2)'
          }
        }
      ]
    }
  },
  defaultColor: ['get', 'color'],
  hoverColor: ['case',
    ['==', ['get', 'name'], '区域1'],
    'rgba(255, 0, 0, 0.4)',
    'rgba(0, 255, 0, 0.4)'
  ],
  lineWidth: 2,
  defaultLineColor: '#000',
  onMouseEnter: function(e) {
    console.log('进入热区:', e.features[0].properties.name);
  },
  onClick: function(e) {
    console.log('点击热区:', e.features[0].properties.name);
  }
})

// 稍后更新热区数据
setTimeout(function() {
  map.setPolygonData('area-polygon', {
    type: 'geojson',
    data: {
      type: 'Feature',
      id: 'area3',
      geometry: {
        type: 'Polygon',
        coordinates: [
          [
            [116.39, 39.89],
            [116.41, 39.89],
            [116.41, 39.91],
            [116.39, 39.91],
            [116.39, 39.89]
          ]
        ]
      },
      properties: {
        name: '区域3',
        color: 'rgba(0, 0, 255, 0.2)'
      }
    }
  })
}, 3000)

常见问题

1. 热区不显示：检查数据源是否正确，确保坐标格式符合GeoJSON规范。

2. 事件不触发：确保热区的pointer-events属性没有被设置为none，检查事件回调函数是否正确绑定。

3. 热区样式问题：可以通过调整defaultColor、hoverColor和activeColor等参数来修改热区的外观。

4. 性能优化：对于大量热区数据，可以考虑使用矢量切片或数据聚合来提高性能。