区域图

地图区域图组件，用以展示不同地区的轮廓形状和数据分布。

基础示例

<template>
  <tlbs-map
    ref="mapRef"
    api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
    :center="center"
    :zoom="zoom"
    :control="control"
    @click="onClick"
    @map_inited="onMapInited"
  >
    <tlbs-area
      ref="areaRef"
      :data="areaData"
      :styles="{
        style1: {
          fillColor: 'rgba(56,124,234,0.7)', //设置区域填充颜色
          strokeColor: '#6799EA', //设置区域边线颜色
          strokeWidth: 1,
        }
      }"
      :select-options="selectOptions"
      :options="options"
    />
    <div class="control-container">
      <button @click.stop="getLayerInstance">
        打印区域图实例
      </button>
    </div>
  </tlbs-map>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue-demi';

export default defineComponent({
  name: 'AreaDemo',
  setup() {
    const mapRef = ref(null);
    const areaRef = ref(null);
    const center = ref({ lat: 40.046014541872594, lng: 116.28684997558594 });
    const zoom = ref(15);
    const onClick = (e: Event) => {
      console.log(e);
    };
    let datas: number[][] | number[][][] | number[][][][]	 = [];
    const areaData = ref<TMap.visualization.AreaPlane[]>([]);
    onMounted(async () => {
      await loadHeatData();
      datas = (window as any).areaDatas || [];
      const data: TMap.visualization.AreaPlane[] = [];
      datas.forEach((item) => {
        data.push({
          path: item, // 设置区域边界线经纬度点串
          styleId: 'styel1', // 设置区域样式id
        });
      });
      areaData.value = data;
    });

    const onMapInited = () => {
      // 地图加载完成后，可以获取地图实例、区域图实例，调用地图实例、区域图实例方法
      console.log(mapRef.value.map);
      console.log(areaRef.value.area);
    };

    const getLayerInstance = () => {
      // 可以获取区域图实例，调用区域图实例方法
      console.log(areaRef.value.area);
    };

    return {
      center,
      zoom,
      onClick,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      areaData,
      options: {
        minZoom: 5,
      },
      selectOptions: { // 设置拾取配置
        action: 'hover',
        style: {
          fillColor: 'rgba(28,213,255,0.8)', // 设置区域填充颜色
          strokeColor: '#fff', // 设置区域边线颜色
          strokeWidth: 1, // 区域边线宽度
          strokeDashArray: [0, 0], // 边线虚线展示方式
        },
        enableHighlight: false,
      },
      mapRef,
      areaRef,
      onMapInited,
      getLayerInstance,
    };
  },
});
const loadHeatData = () => new Promise((resolve) => {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://mapapi.qq.com/web/lbs/visualizationApi/demo/data/areaClick.js';
  script.addEventListener('load', () => {
    resolve('loaded');
  });
  document.body.appendChild(script);
});
</script>
<style>
.control-container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
}
button {
  padding: 4px;
  background-color: #fff;
  margin-right: 5px;
  border: 1px solid #ddd;
}
</style>

props

名称	类型	说明
data	TMap.visualization.AreaPlane[]	区域数据，AreaPlane类型参考官网文档
styles	TMap.visualization.AreaStyleHash	区域图样式，AreaStyleHash类型参考官网文档
selectOptions	TMap.visualization.VisualSelectOptions	拾取配置，可设置拾取动作、选中样式，其中选中样式需符合AreaStyle对象规范，参考官网文档。
options	TMap.visualization.AreaOptions	除了上述属性的其他配置参数，参考TMap.visualization.AreaOptions

TMap.visualization.AreaOptions

区域图配置参数。

属性名称	类型	说明
enableBloom	Boolean	区域图呈现泛光效果，默认为false。
toggleAnimation	AnimationOptions	开关动画配置参数，不配置则无开关动画效果。支持animationType为‘fade’淡入淡出一种类型，默认animationType为‘fade’淡入淡出。
zIndex	Number	图层绘制顺序。
minZoom	Number	图层最小缩放层级，当地图缩放层级小于该值时该图层不显示，默认为3。
maxZoom	Number	图层最大缩放层级，当地图缩放层级大于该值时该图层不显示，默认为20。

事件

名称	参数	说明
click	evt: TMap.VisualEvent	点击区域时触发，参考官网文档
hover	evt: TMap.VisualEvent	鼠标悬停目标改变时触发，若悬停在图形外部，则返回结果中的拾取对象为null，参考官网文档

组件实例属性

名称	类型	说明
area	TMap.visualization.Area	区域图层实例。实例方法参考TMap.visualization.Area方法

TMap.visualization.Area方法

方法	返回值	说明
setStyles(styles: Object)	this	设置样式集合。
setData(dataList:AreaPlane[])	this	设置数据。
getData()	AreaPlane[]	获取数据。
setZIndex(zIndex:Number)	this	设置图层绘制顺序。
getZIndex()	Number	获取图层绘制顺序。
setMinZoom(minZoom: Number)	this	设置图层最小缩放层级，当地图缩放层级小于该值时该图层不显示。
getMinZoom()	Number	获取图层最小缩放层级。
setMaxZoom(maxZoom: Number)	this	设置图层最大缩放层级，当地图缩放层级大于该值时该图层不显示。
getMaxZoom()	Number	获取图层最大缩放层级。
addTo(map:Map)	this	添加至指定地图实例。
getSelectOptions()	VisualSelectOptions	获取拾取配置。
setSelectOptions(selectOptions: VisualSelectOptions)	this	设置拾取配置。
show()	this	显示图层。
hide()	this	隐藏图层。
remove()	this	从地图中删除图层。
destroy()	this	销毁图层对象。
updateAnimation(type:String, animationOptions: AnimationOptions)	this	更新指定类型的动画参数，type支持‘toggle’。
getAnimation(type:String)	AnimationOptions	获取指定类型的动画参数，type支持‘toggle’。
on(eventName:String, listener:Function)	this	添加listener到eventName事件的监听器数组中。
off(eventName:String, listener:Function)	this	从eventName事件的监听器数组中移除指定的listener。