ArcGIS API for JavaScript 3.x 添加动态波纹标注

模拟波纹效果基于 arcgis 3.x,

先看效果图：

 

实现思路

波纹是由两个图层组成，圆点+动态圆，主要借助于'esri/geometry/Point'和'esri/symbols/SimpleMarkerSymbol',这两个类。

Point创建点，

SimpleMarkerSymbol创建一个圆，并且通过api（ markerSymbol.setSize(15);  markerSymbol.setColor([255, 0, 0, 0.85]) ） 来定时控制圆的大小和透明度。

如果地图中只要一个波纹标注，可通过定时器实现即可，但是如果页面地图中有多个点的标注，开一堆定时器并不容易操控。

后来我的思路是把定位的图层先放到一个数组中，等所有的图层标注完成后，在开一个定时器来统一设置圆图层的大小和透明度。这样就避免了每个标注点开一个定时器的烦恼。但这样会有一个小小的瑕疵，就是各个标注图层放大缩小都是统一的（就如上面效果图一样），但这样也是可以解决的，其实在给图层设置半径大小的时候，最初添加一个随机数就可以了，不需要每个图层半径大小开始都一样。

以下是主要代码，其他不在过多赘述：

一：创建一个人员标注图层，方便后期其他业务统一管理（比如标注图层的清除等）。

this.peoplePositionLayer = new this.gisConstructor.GraphicsLayer({
        id: 'peoplePostionLayer',
        className: 'custom-position-layer',
      })

二、波纹图层

drawPeoplePosition(longitude,latitude){   
     // 根据经纬度标注点
        var point = new this.gisConstructor.Point(longitude,latitude);

        // 创建符号类实例    
        // 这里创建的是红色实心圆点
        var markerSymbol = new this.gisConstructor.SimpleMarkerSymbol();
        // 设置实例样式
        markerSymbol.setStyle(this.gisConstructor.SimpleMarkerSymbol.STYLE_CIRCLE);
        // 设置圆点半径--这个是那个实心圆点
        markerSymbol.setSize(15);
        // 设置圆点rgba
        markerSymbol.setColor([255, 0, 0, 0.85]);
        markerSymbol.setOutline(null);
        var graphic = new this.gisConstructor.graphic(point, markerSymbol);
        // 添加到自定义图层中
        this.peoplePositionLayer.add(graphic);
        
        // 创建符号类实例    
        // 这里创建的是红色半透明圆-后面就是控制该实例半径和透明图实心波纹效果
        var rippleSymbol = new this.gisConstructor.SimpleMarkerSymbol();
        rippleSymbol.setStyle(this.gisConstructor.SimpleMarkerSymbol.STYLE_CIRCLE);
         // 设置初始半径
        rippleSymbol.setSize(5);
        rippleSymbol.setOutline(null);
        // 设置圆rgba
        rippleSymbol.setColor([255, 0, 0, 1]);
        var rippleGraphic = new this.gisConstructor.graphic(point, rippleSymbol);
         // 添加到自定义图层中
        this.peoplePositionLayer.add(rippleGraphic);
        // 把标注的图层依次放入数组中
        // 后面统一设置半径大小和透明度
        this.rippleGraphicArr.push(rippleGraphic);
}

三、统一设置波纹圆的大小和透明度（这里我没有用定时器，改用请求动画帧这样效果过渡更加自然）

step(){
    // 循环定位标注图层
      this.rippleGraphicArr.forEach(rippleGraphic=>{
           // 获取当前标注图层半径大小
            // 并设置图层半径放大的粒度
          var size = rippleGraphic.symbol.size;
          size += 2;
            // 圆图层放到最大即波纹消失，重置图层半径
          if (size > 100) {
             rippleGraphic.symbol.setSize(0);
           
          } else {
            rippleGraphic.symbol.setSize(size);
          }
          let alpha=(101-size)/100;
        // 设置颜色透明度
          rippleGraphic.symbol.setColor([255, 0, 0, alpha]);
        // setSymbol 这个方法必须调用，否则不生效，重绘标注圆图层
          rippleGraphic.setSymbol(rippleGraphic.symbol)
        
      });
      this.animateID= window.requestAnimationFrame(this.step);
    },

最后调用step() 方法即可。