vue3+ts使用天地图显示热力图

在public/index.html文件里引入

<script
        type="text/javascript"
        src="https://api.tianditu.gov.cn/api?v=4.0&tk=你的key"
    ></script>
    <!-- 热力图所需资源文件 -->
    <script type="text/javascript"
    src="http://lbs.tianditu.gov.cn/api/js4.0/opensource/openlibrary/HeatmapOverlay.js"></script>

<template>
    <div class="container" id="container">
    </div>
</template>
<script lang="ts" setup>
import { onMounted， reactive } from 'vue';
// 接口
import { apiGisList } from '../../api/index'
// 引入图标
import bd from '../../assets/imgs/point.png'
const state = reactive({
    map: null as any,
    pointList: [
	    {
			Lat: 106.59588,
			Lng: 29.57764,
			Mc: '默认数据',
			value: 20
		}
    ],
    heatmapOverlay: '' as any
})
onMounted(() => {
    getData()
})
// 获取热力图数据
const getData = () =>{
    apiGisList({}).then((res: any) => {
        state.pointList = res
        initMap()
    })
}
const initMap = () => {
    state.map = new window.T.Map('container', {
        projection: 'EPSG:4326'
    })
    state.map.centerAndZoom(new window.T.LngLat(106.59588, 29.57764), 10)
    // 热力图
    state.heatmapOverlay = new T.HeatmapOverlay({
    	// 热力图的透明度,1-100
        "opacity": .5,
        // 热力图的每个点的半径大小
        "radius": 30,
        // 设置热力图层级显示颜色
        "gradient": {
            .2:'rgb(255, 0, 0)',
            .5:'rgb(0, 110, 255)',
            .100:'rgb(255, 255, 255)'
        }
    });
    var points = convertData(state.pointList);
    state.map.addOverLay(state.heatmapOverlay);
    state.heatmapOverlay.setDataSet({data: points, max: 300});
}
// 热力图数据处理
const convertData = function (data:any) {
    var res:any = [];
    data.forEach((item: any) => {
        res.push({
            name: item.Mc,
            lat: item.Lat,
            lng: item.Lng,
            count: item.value
        });
    })
    return res;
};
</script>
<style scoped lang="scss">
#container{
    padding:0px;
    margin: 0px;
    width: 100%;
    height: 800px;
}
</style>