VUE3 实现高德地图点聚合水波纹效果

一、确保已引入高德地图插件 

二、效果图

高德点聚合水波纹效果

 

 三、直接上代码

        map = new AMap.Map(props.id, {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          mapStyle: "amap://styles/grey",
          zoom: 11.3, // 初始化地图级别
          pitch: 25,//倾斜角度
          center: [115.446849, 35.203035], // 初始化地图中心点位置
          rotation: 330,//初始顺时针旋转角度
        });

        map.setRotation(360,false,1000) //旋转至正确方向 地图效果可不加（同时需要删除rotation），



  let _renderClusterMarker1 = function (context) {
    var count = points.length;
    var factor = Math.pow(context.count / count, 1 / 18);
    var div = document.createElement('div');
    var Hue = 180 - factor * 180;
    let bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
    let fontColor = 'hsla(