Appearance
热力图
地图热力组件
基础示例
vue
<template>
<tlbs-map
ref="map"
api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
:center="center"
:zoom="zoom"
:control="control"
@click="onClick"
>
<div class="control-container">
<button @click.stop="switchInfoWindow">
{{ visible ? '关闭' : '开启' }}窗口
</button>
</div>
<tlbs-heat
:data="heatData"
:max="350"
:min="0"
:height="0"
:radius="30"
:gradient-color="gradientColor"
:options="options"
/>
</tlbs-map>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue-demi';
export default defineComponent({
name: 'HeatDemo',
setup() {
const map = ref(null);
const center = ref({ lat: 39.909897147274364, lng: 116.39756310116866 });
const zoom = ref(11);
const heatData = ref([]);
const visible = ref(true);
const onClick = (e: Event) => {
console.log(e);
};
onMounted(async () => {
await loadHeatData();
heatData.value = (window as any).heatData || [];
});
const switchInfoWindow = () => {
visible.value = !visible.value;
};
return {
visible,
center,
zoom,
onClick,
control: {
scale: {},
zoom: {
position: 'topRight',
},
},
map,
// @ts-ignore
heatData,
gradientColor: {
stops: {
0.6: '#673198',
0.8: '#e53390',
0.9: '#ffc95a',
},
},
options: {
minZoom: 10,
// maxZoom: 15,
},
switchInfoWindow,
};
},
});
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 | 热力数据 |
radius | Number | 最大辐射半径,默认为50。 |
height | Number | 峰值高度,默认为100。 |
opacity | Number | 全局透明度,取值范围[0,1],默认为0.8。 |
min | Number | 热力最弱阈值,小于该值的不显示,默认为0。 |
max | Number | 热力最强阈值,大于该值的显示为最强色,默认为数据中的最大值。 |
gradientColor | GradientColor | 渐变颜色,渐变方向由GradientColor对象的angle属性决定,其中渐变色断点集合需符合GradientColor对象规范 |
options | TMap.visualization.HeatOptions | 除了上述属性的其他配置参数,点击下面官网文档链接查看 |
参考官网文档 https://lbs.qq.com/webApi/visualizationApi/visualizationDoc/visualizationDocHeat
组件实例属性
名称 | 类型 | 说明 |
---|---|---|
heat | TMap.visualization.Heat | 热力图层实例。 |