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(' + Hue + ',100%,85%,1)';
    let borderColor = 'hsla(' + Hue + ',100%,40%,1)';
    let shadowColor = 'hsla(' + Hue + ',100%,70%,1)';
    div.style.backgroundColor = bgColor;
    let size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
    div.style.width = div.style.height = size + 'px';
    // div.style.border = 'solid 1px ' + borderColor;
    div.style.borderRadius = size / 2 + 'px';
    div.style.boxShadow = '0 0 25px ' + shadowColor;
    div.innerHTML = `
            <div class="circle-marker-content">
              <span class="item_count">${context.count}</span>
              <div class="item item1" style='height:${size}px;width:${size}px;'></div>
              <div class="item item3" style='height:${size + 0.8}px;width:${size + 0.8}px;'></div>
              <div class="item item5" style='height:${size + 1.6}px;width:${size + 1.6}px;'></div>
            </div>`;
    div.style.lineHeight = size + 'px';
    div.style.color = fontColor;
    div.style.fontSize = '14px';
    div.style.textAlign = 'center';
    context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
    context.marker.setContent(div)
  }
  let _renderMarker1 = function (context) {
    var content = `<div class="circle-marker-content" >
              <span class="item_count"></span>
              <div class="item item1" style='height:15px;width:15px;'></div>
              <div class="item item3" style='height:25px;width:25px;'></div>
              <div class="item item5" style='height:35px;width:35px;'></div>
            </div>`;
    var offset = new AMap.Pixel(-9, -9);
    context.marker.setContent(content)
    context.marker.setOffset(offset)
  }

  let gridSize = 60
  map.plugin([ "AMap.MarkerCluster"], function () {
    let cluster = new AMap.MarkerCluster(map, points, {
      gridSize: gridSize, // 设置网格像素大小
      minClusterSize: 2, //1.x版本的把这里改成1就可以实现点数为1的水波纹效果，2.0的需要用_renderMarker
      renderClusterMarker: _renderClusterMarker1, // 自定义聚合点样式
      renderMarker: _renderMarker1, // 自定义非聚合点样式
    });

    //添加聚合点点击事件
    cluster.on('click', function (e) {
      var zoom = map.getZoom() + 2;
      //判断是否是聚合点，不是聚合点就执行单个点击方式
      if (e.clusterData.length <= 1) {
        var id = e.cluster.m[0].keyid//获取当前单位的id用于查询详情弹出信息框
        console.log(id)
        return;
      }
      //计算所有聚合点的中心点
      let alng = 0,
          alat = 0;
      for (const m of e.clusterData) {
        alng += m.lnglat.lng;
        alat += m.lnglat.lat;
      }
      const lat = alat / e.clusterData.length;
      const lng = alng / e.clusterData.length;
      //以中心点固定倍数放大地图，达到展开聚合点的效果
      map.setZoom(zoom);
      map.setCenter([lng, lat]);
    });
  })

<style lang="less">
#container {
  width: 100%;
  height: 800px;
}

@circleColor: #4196ff;
@circleColorShadow: #ed1941;

.circle-marker-content {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 1.8vh;
  width: 1.8vh;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  text-align: center;
  background: @circleColorShadow;
  box-shadow: 0 0 14px @circleColor;;

  .item_count {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: 500;
    font-size: 16px;
    z-index: 10;
    opacity: 0.8;
  }

  @keyframes scaless {
    0% {
      /* transform: scale(0);  将0改成1*/
      transform: scale(1);
      opacity: 1;
    }

    100% {
      transform: scale(2);
      opacity: 0;
    }
  }

  .item {
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
  }

  .item:before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    display: inline-block;
    width: 100%;
    height: 100%;
    //border: 1px solid red;
    //box-shadow: hsl(200, 100%, 50%) 0 0 25px;
    border-radius: 100%;
    opacity: 0.6;
    background-color: @circleColorShadow;
    box-shadow: 0 0 14px @circleColor;;
    animation: scaless 5s infinite cubic-bezier(0, 0, 0.49, 1.02);
  }

  .item1:before {
    animation-delay: 0s;
  }

  .item2:before {
    animation-delay: 1s;
  }

  .item3:before {
    animation-delay: 2s;
  }

  .item4:before {
    animation-delay: 3s;
  }

  .item5::before {
    animation-delay: 4s;
  }
}
</style>

会用到 less。需要安装less-loader和less：
 

可以这样安装：

npm add less-loader 或者 yarn add less-loader

npm add less less 或者 yarn add less less

无法使用yarn，可通过 yarn下载