网格热力图

地图网格热力图组件

基础示例

<template>
  <tlbs-map
    ref="map"
    api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
    :center="center"
    :zoom="zoom"
    :control="control"
    @click="onClick"
  >
    <tlbs-grid
      :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"
    />
  </tlbs-map>
</template>

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

export default defineComponent({
  name: 'GridDemo',
  setup() {
    const map = 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 || [];
    });

    return {
      center,
      zoom,
      onClick,
      control: {
        scale: {},
        zoom: {
          position: 'topRight',
        },
      },
      map,
      // @ts-ignore
      heatData,
      options: {
        minZoom: 5,
      },
      selectOptions: {
        action: 'click', // 拾取动作
        style: '#E9AB1D',
        enableHighlight: false, // 是否使用高亮效果
      },
    };
  },
});

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	HeatPoint	热力网格数据
sideLength	Number	单位正方形网格边长, 单位为米, 默认1000。
extrudable	Number	网格是否可拔起，默认为true。
colorList	Number	颜色层级，颜色支持rgb(), #RRGGBB格式, 默认为[’#D8AFA7’, ‘#842610’, ‘#641200’]。
heightRange	Number	高度变化区间，需要传入正整数，默认为[1, 100]，若extrudable为false，则不生效。
showRange	Number	网格聚合数据显示区间，需要传入正整数，区间外的数据不显示，区间内的数据线性映射到高度区间及颜色层级。
options	TMap.visualization.HeatOptions	除了上述属性的其他配置参数，点击下面官网文档链接查看

参考官网文档 https://lbs.qq.com/webApi/visualizationApi/visualizationDoc/visualizationDocGrid

组件实例属性

名称	类型	说明
area	TMap.visualization.Grid	网格热力图层实例。