模拟波纹效果基于 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() 方法即可。
