使用天地图动态加载波纹动画

 

.circle-marker-content {
  // display: none;
  position: relative;
  top: 50%;
  left: 50%;
  height: 1.8vh;
  width: 1.8vh;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  text-align: center;
  background: #ff2511;
  border: 1px solid #f32310;
  box-shadow: 0px 0px 14px #ff1c07;
  z-index: 1000;

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

  @keyframes scaless {
    0% {
      transform: scale(0);
      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%);
    height: 4vh;
    width: 4vh;
  }

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

动态效果用div+css实现

    setDraw(data) {
        var zoom = 15
        var point = new T.LngLat(this.lng * 1 || 116.40769, this.lat * 1 || 39.89945)
        console.log(this.lng, this.lat)
        TMap.centerAndZoom(point, zoom)
        if (data && data.length > 0) {
          data.forEach((item) => {
            this.addPoint(item)
          })
        }
      // })
    },
    // 添加自定义动画点位
    addPoint(item) {  
      const that = this;
      // 添加点击效果
      var definedOverlay = T.Overlay.extend({
        initialize: function (lnglat) {
          this.lnglat = lnglat;
        },
        onAdd: function () {
          var div = this._div = document.createElement("div");
          div.classList.add('circle-marker-content');
          var div1 = this._div1 = document.createElement("div");
          div1.classList.add('item'); div1.classList.add('item1');
          div.appendChild(div1);
          var div2 = this._div2 = document.createElement("div");
          div2.classList.add('item'); div2.classList.add('item2');
          div.appendChild(div2);
          var div3 = this._div3 = document.createElement("div");
          div3.classList.add('item'); div3.classList.add('item3');
          div.appendChild(div3);
          var div4 = this._div4 = document.createElement("div");
          div4.classList.add('item'); div4.classList.add('item4');
          div.appendChild(div4);
          var div5 = this._div5 = document.createElement("div");
          div5.classList.add('item'); div5.classList.add('item5');
          div.appendChild(div5);
          TMap.getPanes().overlayPane.appendChild(this._div);
          this.update(this.lnglat);
        },
        update: function () {
          var pos = TMap.lngLatToLayerPoint(this.lnglat);
          this._div.style.top = (pos.y - 36) + "px";
          this._div.style.left = (pos.x - 11) + "px";

        }
      });
       // 添加标注/覆盖物
      var point = new T.LngLat(item.longitude, item.latitude);
      console.log(item.longitude, item.latitude)
      const pdefinedOverlay = new definedOverlay(point);
      TMap.addOverLay(pdefinedOverlay);

    },

注意：在style部分不要用scoped否则会没有效果