ArcGIS API for JavaScript 4.x 实现动态脉冲效果

1. 设计思路

主要通过定时刷新，每一次的脉冲渲染圈不停的放大，并且透明度缩小，直到达到一定的大小再退回0。

2. 实现代码

import MapView from "@arcgis/core/views/MapView";
import GraphicsLayer from "@arcgis/core/layers/GraphicsLayer";
import Point from "@arcgis/core/geometry/Point";
import SimpleMarkerSymbol from "@arcgis/core/symbols/SimpleMarkerSymbol"
import Graphic from "@arcgis/core/Graphic";
import SceneView from "@arcgis/core/views/SceneView";

export class FlashPointLayer{
    view: MapView | SceneView;
    flashLayer:GraphicsLayer 
    piontArr:Point[]
    size:number
    alpha:number
    markerSymbol:SimpleMarkerSymbol
    animationId:number
    constructor(view:MapView | SceneView){
        this.view = view
        this.flashLayer = new GraphicsLayer({
            id: 'flashLayer',
            title: 'flashLayer',
        })
        this.piontArr = []
        this.markerSymbol = new SimpleMarkerSymbol({
            style:'circle',
            size:15,
            color:[255, 0, 0, 0.85],
            outline:{
                color: [ 0,0,0,0]
            }
        });
        this.size = 5
        this.alpha = (101-this.size)/100
        this.animationId = 0
        this.startAnimation()
    }
    //添加多个闪烁点
    addManyPoint(pointArr:number[][]){
        pointArr.forEach(point=>{
            this.piontArr.push(new Point({
                x: point[0],
                y: point[1],
                spatialReference: this.view.spatialReference,
            }))
        })
    }
    //添加单个闪烁点
    addPoint(lon:number,lat:number){
        const point =  new Point({
            x: lon,
            y: lat,
            spatialReference: this.view.spatialReference,
          });
          this.piontArr.push(point)
    }  
    //启动动画
    startAnimation = ()=>{
        const centerGraphicArr:Graphic[] = []
        const rippleGraphicArr:Graphic[] = []
        this.size = this.size>99?0:this.size+2
        this.alpha = (101- this.size)/100;
        this.piontArr.forEach(point=>{
            centerGraphicArr.push(new Graphic({
                geometry:point,
                symbol:this.markerSymbol
            }))
            rippleGraphicArr.push(new Graphic({
                geometry:point,
                symbol:new SimpleMarkerSymbol({
                    style:'circle',
                    size:this.size,
                    color:[255, 0, 0, this.alpha],
                    outline:{
                        color: [ 0,0,0,0]
                    }
                })
            }))
        })
        this.flashLayer.removeAll();
        this.flashLayer.addMany(centerGraphicArr)
        this.flashLayer.addMany(rippleGraphicArr)
        this.view.map.remove(this.flashLayer)
        this.view.map.add(this.flashLayer)
        this.animationId = window.requestAnimationFrame(this.startAnimation);
    }
    //暂停动画
    pauseAnimation = ()=>{
        window.cancelAnimationFrame(this.animationId)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

这个文件拿去可以直接使用，下面是引入的方式：

//这里需要传入MapView或者ScanView
let flashPointLayer = new FlashPointLayer(viewHandler.getView())
1
2

然后可以调用提供的方法实现动态点的添加，动画的暂停和启动。

3. 最终效果