网格热力图

地图网格热力图组件，网格热力图将离散的数据点以正方形网格区域进行聚合，根据落入区域内的数据点数量渲染不同颜色的高度的正方形棱柱。

基础示例

<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-grid
      ref="gridRef"
      :data="heatData"
      :extrudable="true"
      :side-length="1000"
      :height-range="[1, 1000]"
      :show-range="[1, 100]"
      :color-lis="['#ea9c21', '#ea8e21', '#e6721c', '#e55f1d', '#cc2a18']"
      :options="options"
      :select-options="selectOptions"
    />
    <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: 'GridDemo',
  setup() {
    const mapRef = ref(null);
    const gridRef = ref(null);
    const center = ref({ lat: 39.909897147274364, lng: 116.39756310116866 });
    const zoom = ref(11);
    const heatData = ref([]);
    const onClick = (e: Event) => {
      console.log(e);
    };

    onMounted(async () => {
      await loadHeatData();
      heatData.value = (window as any).heatData || [];
    });

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

    const getLayerInstance = () => {
      // 可以获取网格图实例，调用网格图实例方法
      console.log(gridRef.value.grid);
    };

    return {
      center,
      zoom,
      onClick,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      mapRef,
      gridRef,
      // @ts-ignore
      heatData,
      options: {
        minZoom: 5,
      },
      selectOptions: {
        action: 'click', // 拾取动作
        style: '#E9AB1D',
        enableHighlight: false, // 是否使用高亮效果
      },
      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/heat.js';
  script.addEventListener('load', () => {
    resolve('loaded');
  });
  document.body.appendChild(script);
});
</script>

props

名称	类型	说明
data	TMap.visualization.HeatPoint[]	热力网格数据，HeatPoint类型参考官网文档
sideLength	Number	单位正方形网格边长, 单位为米, 默认1000，参考官网文档。
extrudable	Boolean	网格是否可拔起，默认为true，参考官网文档。
colorList	String[]	颜色层级，颜色支持rgb(), #RRGGBB格式, 默认为[’#D8AFA7’, ‘#842610’, ‘#641200’]，参考官网文档。
heightRange	Number[]	高度变化区间，需要传入正整数，默认为[1, 100]，若extrudable为false，则不生效，参考官网文档。
showRange	Number[]	网格聚合数据显示区间，需要传入正整数，区间外的数据不显示，区间内的数据线性映射到高度区间及颜色层级，参考官网文档。
options	TMap.visualization.GridOptions	除了上述属性的其他配置参数，参考TMap.visualization.GridOptions

TMap.visualization.GridOptions

网格热力图配置参数。

属性名称	类型	说明
selectOptions	VisualSelectOptions	拾取配置，可设置拾取动作、选中样式、是否使用高亮效果，其中选中样式为String类型的颜色值。
enableBloom	Boolean	网格热力图呈现泛光效果，默认为false。
toggleAnimation	AnimationOptions	开关动画配置参数，不配置则无开关动画效果。支持animationType为‘fade’淡入淡出，‘grow’生长两种类型，默认animationType为‘fade’淡入淡出。
zIndex	Number	图层绘制顺序。
minZoom	Number	图层最小缩放层级，当地图缩放层级小于该值时该图层不显示，默认为3。
maxZoom	Number	图层最大缩放层级，当地图缩放层级大于该值时该图层不显示，默认为20。
heightScale	Number	网格热力图高度缩放系数，需要传入正数，默认为1.0。
coverage	Number	网格覆盖范围比例系数，可用于调整网格间的间隙，取值范围(0, 1.0]，默认为0.8

事件

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

组件实例属性

名称	类型	说明
grid	TMap.visualization.Grid	网格热力图层实例。实例方法参考TMap.visualization.Grid方法

TMap.visualization.Grid方法

方法	返回值	说明
getValueRange()	Number[]	获取聚合数据取值范围，[min, max]。
setShowRange(showRange:Number[])	this	设置聚合数据显示区间范围，[min, max]。
getShowRange()	Number[]	获取聚合数据显示区间范围。
setSideLength(sideLength: Number)	this	设置单位正方形网格边长, 单位为米, 单位为米。
getSideLength()	Number	获取单位正方形网格边长, 单位为米, 单位为米。
setExtrudable(extrudable: Boolean)	this	设置网格是否可拔起。
getExtrudable()	Boolean	获取网格是否可拔起。
setColorList(colorList: String[])	this	设置颜色层级。
getColorList()	String[]	获取颜色层级。
setHeightRange(heightRange: Number[])	this	设置高度变化区间，需要传入正整数,若extrudable为false，则不生效。
getHeightRange()	Number[]	获取高度变化区间。
setData(dataList:HeatPoint[])	this	设置数据。
getData()	HeatPoint[]	获取数据。
setZIndex(zIndex: Number)	this	设置图层绘制顺序。
getZIndex()	Number	获取图层绘制顺序。
setMinZoom(minZoom: Number)	this	设置图层最小缩放层级，当地图缩放层级小于该值时该图层不显示。
getMinZoom()	Number	获取图层最小缩放层级。
setMaxZoom(maxZoom: Number)	this	设置图层最大缩放层级，当地图缩放层级大于该值时该图层不显示。
getMaxZoom()	Number	获取图层最大缩放层级。
addTo(map:Map )	this	添加至指定地图实例。
updateAnimation(type:String, animationOptions:AnimationOptions)	void	更新指定类别动画参数，type支持‘toggle’。
getAnimation(type:String)	AnimationOptions	获取指定类型的动画参数，type支持‘toggle’。
getSelectOptions()	VisualSelectOptions	获取拾取配置。
setSelectOptions(selectOptions: VisualSelectOptions)	this	设置拾取配置。
setCoverage(coverage: Number)	this	设置网格覆盖范围比例系数, 取值范围(0, 1.0]
getCoverage()	Number	获取网格覆盖范围比例系数
show()	this	显示图层。
hide()	this	隐藏图层。
remove()	this	删除图层。
destroy()	this	销毁图层对象。