高德地图实现水波纹扩散

最新推荐文章于 2024-05-31 22:47:19 发布

原创

最新推荐文章于 2024-05-31 22:47:19 发布 · 5.5k 阅读

10 ·

CC 4.0 BY-SA版权

功能修改，要求在地图上有个类似雷达的水波纹扩散的动画，通过大半天时间的研究、查找，终于完成了这项任务，话不多说，下面直接贴出代码，供有需要的兄弟参考,

1、首先在地图上画个圆如下图

2、新建个JS

/*校验时间 End*/
var timeStart, timeEnd, time;//申明全局变量
var radius = 300  //水纹圆半径(300米)
var circles1; //探测出入口的水波圆
var circles2; //探测出入口的水波圆
var circles3; //探测出入口的水波圆
var bl_drag = false; //拖拽地图控制开关
function getTimeNow() {//获取此刻时间
    var now = new Date();
    return now.getTime();
}

/*地图水波扩散特效 Start*/
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
 */

function CircleShow(radius,level,point,color,icon){
    console.log(radius);
    if(!window.map || !window.BMap|| !window.BMap.Circle){
        return undefined;
    }
    this.radius = radius;
    this.level = new Number(level);
    this.point = point;
    this.color = color;
    // 创建 AMap.Icon 实例：
    var xinhao_icon = new AMap.Icon({
        size: new AMap.Size(20, 20),
        // 图标尺寸
        image: icon, // Icon的图像
        imageSize: new AMap.Size(20, 20) // 根据所设置的大小拉伸或压缩图片
    });
    new AMap.Marker({
        map: map,
        icon: xinhao_icon,
        position: point,
        offset: new AMap.Pixel(-14, -5)
    });
    if(Number.isNaN(this.level)){
        this.level = 1;
    }//至少1层

    if(!this.color || !this.color.fillColor){
        this.color = {
            fillColor:"blue",//默认蓝色
            fillOpacity:0.3     //默认初始透明度0.3
        }
    }

    //计算平均每段扩展距离的透明度
    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:"white",