高德实现水波纹效果

最新推荐文章于 2023-07-19 11:19:23 发布

我是小王同学

最新推荐文章于 2023-07-19 11:19:23 发布

阅读量674

点赞数 1

本文链接：https://blog.csdn.net/m0_46270297/article/details/116950172

版权

思路：高德API中，可以给矢量圆改变半径，改变后没有一个过渡效果，所以使用定时器一帧一帧改变半径，从而使效果显得像水波纹。

大神请参考这里

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
    />
    <script src="https://webapi.amap.com/maps?v=1.4.14&key=你的高德key&plugin=AMap.CircleEditor"></script>
    <title>Document</title>
    <style>
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="container" style="color: blue"></div>
    <script src="./gaodeceshi.js"></script>

    <script src="./jquery.js"></script>
    <script>
      var defaltPoint = [119.281348,26.040913];
      var zoom = 14;
      var map = new AMap.Map("container", {
        resizeEnable: false,
        center: defaltPoint,
        zoom: zoom,
      });
      $(function () {
        initLeiDaZoom();
      });
      function initLeiDaZoom () {
        let circleNum = 0;
        let circleNumTwo = 0;
        let circleNumThree = 0;
        let cricleArr = [];
        for (let i = 0; i < 3; i++) {
          let cricleone = new AMap.Circle({
            center: new AMap.LngLat(119.281348,26.040913), // 圆心位置
            radius: 0,  //半径
            strokeColor: '#66cdaa',  //线颜色
            strokeOpacity: 0,  //线透明度
            strokeWeight: 3,  //线粗细度
            fillColor: '#66cdaa',  //填充颜色
            fillOpacity: 0.3 //填充透明度
          });
          cricleArr.push(cricleone);
        }
        cricleArr.forEach((item) => {
          this.map.add(item);
        });
        let CircleNumId = setInterval(() => {
          cricleArr[0].setRadius(circleNum+=50);
          if (circleNum > 2000) {
            circleNum = 0;
          }
        },50);
        setTimeout(() => {
          let CircleNumIdTwo = setInterval(() => {
            cricleArr[1].setRadius(circleNumTwo+=50);
            if (circleNumTwo > 2000) {
              circleNumTwo = 0;
            }
          },50);
        },600);
        setTimeout(() => {
          let CircleNumIdThree = setInterval(() => {
            cricleArr[2].setRadius(circleNumThree+=50);
            if (circleNumThree > 2000) {
              circleNumThree = 0;
            }
          },50);
        },1200);
      }
    </script>
  </body>
</html>

我是小王同学

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高德实现水波纹效果

思路：高德API中，可以给矢量圆改变半径，改变后没有一个过渡效果，所以使用定时器一帧一帧改变半径，从而使效果显得像水波纹。大神请参考这里<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewpo
复制链接

扫一扫