百度地图覆盖物marker实现水波纹动效

柔情只为你懂 2023-09-26 18:23 139阅读 0赞

#### 文章目录 ####

*  一、编写js？
 *  二、使用步骤
 *   *  1.引入js
     *  2.使用
 *  效果

## 一、编写js？ ##

let requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame;
    let cancelAnimationFrame  = window.cancelAnimationFrame || window.webkitCancelAnimationFrame;
    /**
     * sos告警圆形范围绘制(只有存在map对象时才可以使用)
     * @param radius 半径
     * @param level 层数
     * @param point BMap.Point对象，圆的中心点
     * @param color  颜色对象，包含{fillColor,fillOpacity}
     * @constructor
     */
    export  function CircleShow(radius,level,point,color,map){
        
      if(!window.map || !window.BMap|| !window.BMap.Circle){
        
        return undefined;
      }
      this.radius = radius;
      this.level = new Number(level);
      this.point = point;
      this.color = color;
    
      if(Number.isNaN(this.level)){
        
        this.level = 1;
      }//至少1层
    
      if(!this.color || !this.color.fillColor){
        
        this.color = {
        
          fillColor:"blue",//默认蓝色
          fillOpacity:0.5	 //默认初始透明度0.5
        }
      }
    
      //计算平均每段扩展距离的透明度
      this.endOpacity = 0.1;		//终止透明度设置为0.1
      this.speedOpacity = (this.color.fillOpacity - this.endOpacity)/this.radius;	//每米的透明度
      //先加一层白色的覆盖物，加在图片上表示覆盖范围
      this.circle0 = new BMap.Circle(this.point,this.radius,{
        
        fillColor:"rgba(255, 147, 20, 0)",
        fillOpacity: this.color.fillOpacity,
        strokeWeight: 1 ,
        strokeColor:"rgba(255, 147, 20, 0)",
        strokeOpacity: this.color.fillOpacity,
        enableEditing:false
      });
      map.addOverlay(this.circle0);
    
      //按层数循环构造覆盖物，并加在图片上
      this.circles = new Array();
      for(let i=1; i< this.level; i++){
        
        let circle = new BMap.Circle(this.point,0,{
        
          fillColor:this.color.fillColor,
          fillOpacity: this.color.fillOpacity,
          strokeWeight: 1,
          strokeColor:this.color.fillColor,
          strokeOpacity: this.color.fillOpacity,
          enableEditing:false
        });
        this.circles.push(circle);
        map.addOverlay(circle);
      }
    
      this.clock=new Array(this.level);
    }
    
    /**
     * 动画启动
     * @param distance 波纹间隔时间（单位ms）
     * @param t0 扩散一次所需的时间
     */
    CircleShow.prototype.start = function (distance,t0){
        
      let _self = this;
    
      /**
       * 定义动画函数
       * @param startTime 启动的初始时间
       * @param circle 圆形覆盖物对象
       * @param index 序号
       */
      function animateStart(startTime,circle,index){
        
        //计算时间差
        let time = new Date().getTime()-startTime;
        if(time<0){
        
          circle.setRadius(0);						//半径
          circle.setFillOpacity(_self.color.fillColor);	//透明度
          circle.setStrokeOpacity(_self.color.fillOpacity);	//透明度
          //如果未达到执行实现则直接等待
          _self.clock[index] = window.requestAnimationFrame(animateStart.bind(null,startTime,circle,index));
          return;
        }
        //计算当前半径
        //匀减速运动下，每隔t时间，应该扩散的半径:
        //r=r0*(2*t*t0-t*t)/t0
        //其中，r0为最终的扩散半径，即this.radius
        let r = Math.floor(_self.radius*(2*time/t0-time*time/t0/t0));
        let opacity = 0;
        if(time >= t0){
        
          //达到运行时间之后
          //设置圆形覆盖物的样式
          circle.setRadius(_self.radius);				//半径
          circle.setFillOpacity(_self.endOpacity);	//透明度
          circle.setStrokeOpacity(_self.endOpacity);	//透明度
    
          startTime = new Date().getTime() + distance;	//起始时间设置为当前时间加上1倍的时间间隔
          _self.clock[index] = window.requestAnimationFrame(animateStart.bind(null,startTime,circle,index));
        }else{
        
          //计算透明度
          let opacity = _self.color.fillOpacity -
            Number.parseFloat((_self.speedOpacity * r).toFixed(5));	//四舍五入小数点后5位
    
          //设置圆形覆盖物的样式
          circle.setRadius(r);				//半径
          circle.setFillOpacity(opacity);		//透明度
          circle.setStrokeOpacity(opacity);	//透明度
    
          _self.clock[index] = window.requestAnimationFrame(animateStart.bind(null,startTime,circle,index));
        }
      }
    
      //循环每一层执行动画
      for (let [index,circle] of this.circles.entries()) {
        
        animateStart(new Date().getTime()+index*distance, circle, index);
      }
    };
    
    /**
     * 停止动画.
     */
    CircleShow.prototype.stop = function(){
        
      for(let caf of this.clock){
        
        window.cancelAnimationFrame(caf);
      }
    
      //重置覆盖物样式
      for(let circle of this.circles){
        
        circle.setRadius(0);				//半径
        circle.setFillOpacity(this.color.fillOpacity);		//透明度
        circle.getStrokeOpacity(this.color.fillOpacity);	//透明度
      }
    
      this.clock=null;
    };
    
    /**
     * 移除覆盖物.
     */
    CircleShow.prototype.remove = function(map){
        
      //停止动画
      for(let caf of this.clock){
        
        window.cancelAnimationFrame(caf);
      }
    
      map.removeOverlay(this.circle0);
      for(let circle of this.circles){
        
        map.removeOverlay(circle);
      }
    };

## 二、使用步骤 ##

### 1.引入js ###

import {
        CircleShow} from '@/api/uav/wave.js'

### 2.使用 ###

代码如下（示例）：

let xx = new CircleShow(300, 4, pt, {
        fillColor: 'green', fillOpacity: 0.5}, this.map);
                  //参数：每一层播放的间隔时间、每一层扩散至最大所花费的总时间。
                  xx.start(1500, 5000)

--------------------

## 效果 ##

![在这里插入图片描述][02b8e9db7712449f92e70ddc9b7bd9bc.jpeg_pic_center]

[02b8e9db7712449f92e70ddc9b7bd9bc.jpeg_pic_center]: https://img-blog.csdnimg.cn/02b8e9db7712449f92e70ddc9b7bd9bc.jpeg#pic_center

发表评论取消回复

表情：

评论列表（有 0 条评论，139人围观）

还没有评论，来说两句吧...

相关阅读

相关百度地图覆盖物marker实现水波纹动效

文章目录一、编写js？二、使用步骤 1.引入js 2.使用效果一、编写js？ let requestA

柔情只为你懂/ 2023年09月26日 18:23/ 0 赞/ 140 阅读

相关百度地图自定义覆盖物工具栏，修改标识图标

drawingManager工具栏 drawingModes设置工具栏模式直接上效果代码 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

素颜马尾好姑娘i/ 2023年07月24日 03:18/ 0 赞/ 10 阅读

相关 android百度地图清空覆盖物,百度地图清除指定覆盖物（Overlay）的方法

最近的项目中一直在用百度地图，今天用到了清除覆盖物(Overlay)的方法。在这里mark一下。 map.clearOverlays() 清除覆盖物有两个方法：map.re

心已赠人/ 2022年10月17日 15:56/ 0 赞/ 686 阅读

相关百度地图使用经验-第3集添加覆盖物

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注

今天药忘吃喽~/ 2022年10月01日 15:53/ 0 赞/ 187 阅读

相关百度地图API 判断点击的是地图还是覆盖物

在百度地图上圆形区域检索，返回圆形覆盖范围内的”公司”检索结果，并展示在地图上当点击检索结果(标注)进行查看的时候会再次以此为原点进行检索 ![这里写图片描述][20

男娘i/ 2022年08月17日 15:31/ 0 赞/ 313 阅读

相关 android--百度地图--方向定位+覆盖物显示

[Android 百度地图 SDK v3.0.0 （一）][Android _ SDK v3.0.0] [Android 百度地图 SDK v3.0.0 （二）定位与

谁践踏了优雅/ 2022年08月10日 13:56/ 0 赞/ 197 阅读

相关百度地图之添加覆盖物

本文主要讲解如何实现在百度地图上添加覆盖物 1.承载数据的实体我们从服务器返回的数据部分，最终可能是个Json数组，我们需要转换为实体集合，即下面的Info.ja

r囧r小猫/ 2022年07月29日 11:57/ 0 赞/ 228 阅读

相关百度地图Marker隐藏/显示

1. 隐藏Marker function hiddenMarker(eventtype)\{ var allOverlay = map.getOverlays(); f

迈不过友情╰/ 2022年06月14日 06:55/ 0 赞/ 1054 阅读

相关百度地图 Marker 点击弹出窗口

Android 百度地图 SDK v3.0.0 添加覆盖物Marker与InfoWindow的使用我们先看效果图片： ![100f0d41-be00-

青旅半醒/ 2022年04月12日 12:27/ 0 赞/ 930 阅读

相关百度地图之标注物聚合

在博客《[百度地图查询视野范围内的建筑物][Link 1]》当中描述了如何查询视野范围内的建筑物，可以减少地图加载标注物的数量，提升速度。但是当地图的zoom级很小时，会出现标

喜欢ヅ旅行/ 2022年01月09日 08:11/ 0 赞/ 560 阅读