Vue+高德地图（海量散点）显示大量数据解决方法

高德地图示例代码都是原生，新手用vue比较麻烦，话不多说直接上代码，备注都在代码里

<template>
    <div ref="mapContainer" class="map-container"></div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import AMapLoader from '@amap/amap-jsapi-loader';

onMounted(() => {
    getData();
});

// 使用 ref 创建地图容器的引用
const mapContainer = ref(null);

const locations = ref([]);

const getData = async () => {
    locations.value = [/**
      // 数据格式
      {
        lnglat: [精度, 纬度],
        name: name,
        style: 样式下标,
      }
    */];
    InitMap();
};

// 创建一个函数来生成颜色圆圈图标的 URL
const createIconUrl = (color) => {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const size = 10; // 圆圈直径
    canvas.width = size;
    canvas.height = size;
    ctx.beginPath();
    ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
    ctx.fillStyle = color;
    ctx.fill();
    ctx.stroke();
    return canvas.toDataURL(); // 返回图标的 Data URL
};

const InitMap = async () => {
    try {
        await AMapLoader.load({
            key: 'Your key', // 替换为你的高德地图 API 密钥
            version: '2.0',
            plugins: [], // 在这里添加需要的插件
        });

        // 初始化地图
        const map = new AMap.Map(mapContainer.value, {
            center: [116.397428, 39.90923], // 初始地图中心点
            resizeEnable: true, // 监控地图尺寸变化
            viewMode: '3D',
            pitch: 0, // 地图俯仰角度
            zoom: 5, // 地图显示的缩放级别
            mapStyle: 'amap://styles/darkblue', // 设置地图的显示样式
        });

        // 标记图标的颜色根据 status 值选择
        const colors = ['yellow', 'green', 'red', 'grey', 'red'];

        let style = [
            {
                url: createIconUrl(colors[0]), //图标地址
                size: new AMap.Size(10, 10), //图标的尺寸
                zIndex: 1, //每种样式图标的叠加顺序，数字越大越靠前
            },
            {
                url: createIconUrl(colors[1]),
                size: new AMap.Size(10, 10),
                zIndex: 2,
            },
            {
                url: createIconUrl(colors[2]),
                size: new AMap.Size(10, 10),
                zIndex: 3,
            },
            {
                url: createIconUrl(colors[3]),
                size: new AMap.Size(10, 10),
                zIndex: 4,
            },
            {
                url: createIconUrl(colors[4]),
                anchor: new AMap.Pixel(5, 5),
                size: new AMap.Size(10, 10),
                zIndex: 5,
            },
        ];
        const massMarks = new AMap.MassMarks(locations.value, {
            zIndex: 5, //海量点图层叠加的顺序
            zooms: [2, 24], //在指定地图缩放级别范围内展示海量点图层
            style: style, //设置样式对象
        });
        massMarks.setMap(map);
    } catch (error) {
        console.error('高德地图加载失败', error);
    }
};
</script>

<style scoped>
.map-container {
    width: 100%;
    height: 900px; /* 根据需要调整地图容器的高度 */
}
</style>