vue&高德：点聚合水波纹效果

首先引入高德插件

        高德点聚合示例
        引入插件到index.html

<script src="//a.amap.com/jsapi_demos/static/china.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值&plugin=AMap.MarkerCluster"></script> 

        之后如果遇到这个报错：AMap` is not defined no-undef

        且没有.eslintrc.js，可以在用到高德地图的组件中再次引入高德插件接口。

直接上代码

<template>
  <div class="hello">
    <div id="mapContainer"></div>
  </div>
</template>

<script src="https://webapi.amap.com/maps?v=2.0&key==您申请的key值AMap.MarkerCluster"></script>
<script src="https://a.amap.com/jsapi_demos/static/china.js"></script>
<script>
  export default {
    name: 'HelloWorld',

    data() {
      return {
        map: null,
        cluster: null,
        points: [],
      }
    },

    mounted() {
      this.initMap();
    },

    methods: {
      initMap() {
        this.map = new AMap.Map("mapContainer", {
          resizeEnable: true,
          center: [105, 42],
          zoom: 4,
        });
        // console.log(points)
        this.points = points;
        this.addCluster();
      },

      addCluster(tag) {
        if (this.cluster) {
          this.cluster.setMap(null);
        }
        this.cluster = new AMap.MarkerCluster(this.map, this.points, {
          gridSize: 80,
          minClusterSize: 2, //1.x版本的把这里改成1就可以实现点数为1的水波纹效果，2.0的需要用_renderMarker
          renderClusterMarker:  this._renderClusterMarker, // 自定义聚合点样式
          renderMarker: this._renderMarker, // 自定义非聚合点样式
        });
        //默认样式
        // this.cluster = new AMap.MarkerCluster(this.map, this.points, {gridSize: 80});
      },

      _renderClusterMarker(context) {
        var count = this.points.length;
        var factor = Math.pow(context.count / count, 1 / 18);
        var div = document.createElement('div');
        var Hue = 180 - factor * 180;
        var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
        var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
        var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
        var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
        // div.style.backgroundColor = bgColor;
        var 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 5px ' + shadowColor;
        var content = `
            <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 item2" style='
              height:${size + 0.4}px;
              width:${size + 0.4}px;
              '></div>
              <div class="item item3" style='
              height:${size + 0.8}px;
              width:${size + 0.8}px;
              '></div>
              <div class="item item4" style='
              height:${size + 1.2}px;
              width:${size + 1.2}px;
              '></div>
              <div class="item item5" style='
              height:${size + 1.6}px;
              width:${size + 1.6}px;
              '></div>
            </div>`
        div.innerHTML = content;
        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)
      },

      _renderMarker(context) {
        var content = `<div
            class="circle-marker-content"
            >
              <span class="item_count">1</span>
              <div class="item item1"
              style='
              height:18px;
              width:18px;
              '></div>
              <div class="item item2" style='
              height:18.4px;
              width:18.4px;
              '></div>
              <div class="item item3" style='
              height:18.8px;
              width:18.8px;
              '></div>
              <div class="item item4" style='
              height:19.2px;
              width:19.2px;
              '></div>
              <div class="item item5" style='
              height: 19.6px;
              width: 19.6px;
              '></div>
            </div>`;
        var offset = new AMap.Pixel(-9, -9);
        context.marker.setContent(content)
        context.marker.setOffset(offset)
      },

    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  #mapContainer {
    width: 800px;
    height: 800px;
  }

  @circleColor: #4196ff;

  /deep/ .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: @circleColor;
    border: 1px solid @circleColor;
    box-shadow: 0px 0px 14px @circleColor;

    .item_count {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #1C77C3;
      font-weight: bold;
      font-size: 13px;
      z-index: 10;
    }

    @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%);
    }

    .item:before {
      content: "";
      position: absolute;
      left: -1px;
      top: -1px;
      display: inline-block;
      width: 100%;
      height: 100%;
      border: 1px solid @circleColor;
      border-radius: 100%;
      opacity: 0;
      background-color: @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>

水波纹样式参考css实现水波纹
会用到less。需要安装less-loader，不要安装过高的版本，否则会报错：
this.getOptions is not a function

可以这样安装：npm install less-loader@6.0.0

标签：水波纹,vue,100%,px,50%,var,div,高德,size
来源： https://blog.csdn.net/weixin_43731256/article/details/122700401