基于arcjs 实现雷达扫描效果

话不多说 直接上代码

		// 先创建雷达圈的layer  雷达范围
        createLeiDaFanWeiLayer() {
            this.LeiDaFanWeiLayer = new FeatureLayer({
                title: "LeiDaFanWeiLayer",
                geometryType: "polygon",
                outFields: ["*"],
                objectIdField: "OBJECTID",
                source: [],

                popupEnabled: true,
                visible: false,
                renderer: {
                    type: "simple",
                    symbol: {
                        type: "simple-fill",
                        color: [255, 0, 0, 0],
                        outline: {
                            width: 1,
                            color: "green",
                        },
                    },
                },
                fields: [
                    {
                        name: "OBJECTID",
                        alias: "OBJECTID",
                        type: "oid",
                    },
                    {
                        name: "name",
                        alias: "name",
                        type: "string",
                    },
                ],
            });
            this.map.add(this.LeiDaFanWeiLayer);
        },

        // GIS 实现雷达方法  传入经纬度坐标
        createLeiDaLayer(data) {
                // let p0 = this.lngLatToXY([125.1, 14.5]);
                // this.addLeiDaFanWeiLayer([125.1, 14.5])
                this.addLeiDaFanWeiLayer(data)  
                let p0 = this.lngLatToXY(data);
                this.scan(p0)
        },
        scan(p0) {
            let that = this
            let _offColor = (0.1 / that.offAngTotal) * that.offAngle  //透明度步长,0.1是最前面线条的透明度 
            let _lineWidth = 8 * that.offAngle //线条宽度 
            //记录转动角度
            that.stareAngle += 10;
            if ((that.stareAngle - that.endAngle) > that.offAngTotal) {
                that.endAngle = that.stareAngle - that.offAngTotal;
            }
            that.linesList = []
            clearTimeout(that.Timer) // 清除残留的雷达线
            //清掉现有线条 
            that.view.graphics.items.forEach(item => {
                if (item.attributes == 'linesList') {
                    that.view.graphics.remove(item)
                }
            })
            //画上新线条
            for (let i = that.endAngle, j = 0; i < that.stareAngle; i += that.offAngle, j += _offColor) {
                let p = that.getPoint(p0, i); //r,g,b,a;a,alpha，代表透明度，0为完全透明，1为完全不透明
                let color = [0, 185, 0, j.toFixed(3) * 1];
                let line = that.getLine(color, _lineWidth, p0, p);
                line.geometry = that.toGeographic(line.geometry)
                let lineInfo = {
                    attributes: 'linesList',
                    geometry: line.geometry,
                    symbol: line.symbol,
                }
                that.linesList.push(lineInfo);
            }
            if (this.LeiDaFanWeiLayer.visible) {
                that.linesList.forEach(item => {
                    that.view.graphics.add(item);
                })
                that.Timer = setTimeout(() => {
                    that.scan(p0)
                }, 250);
            }
        },
        getPoint(center, angle) {//获得圆弧上的点（平面坐标）
            let radius = 800 * 1000; //雷达扫描范围为800千米；转换为米 //平面坐标与球面坐标存在误差
            let sin = Math.sin(angle * Math.PI / 180);
            let cos = Math.cos(angle * Math.PI / 180);
            let x = center[0] + radius * sin;
            let y = center[1] + radius * cos;
            return [x, y];
        },
        getLine(color, lineWidth, p1, p2) {//绘制一条半径 
            //画线
            const polyline = new Polyline({
                type: "polyline",
                paths: [[p1, p2]],
                spatialReference: { wkid: 102100 },
            });
            const style = new Graphic({
                geometry: polyline,
                symbol: {
                    type: "simple-line",
                    color,
                    lineWidth,
                    width: 2,
                },
            });
            return style
        },
        lngLatToXY(pt) {//经纬度转化为平面坐标
            let _f = 6378137, _p = 0.017453292519943;
            let lng = pt[0];//经度
            let lat = pt[1];//纬度
            if (lat > 89.999999) { lat = 89.999999; }
            else if (lat < -89.999999) { lat = -89.999999; }
            let c = lat * _p;
            let x = lng * _p * _f;
            let y = _f / 2 * Math.log((1 + Math.sin(c)) / (1 - Math.sin(c)));
            return [x, y];
        },
        // 经纬度转换
        toGeographic(geometry) {
            if (geometry.spatialReference.wkid !== 4326) {
                geometry = webMercatorUtils.webMercatorToGeographic(geometry);
            }
            return geometry;
        },
		// 雷达圈范围
        addLeiDaFanWeiLayer(p0) {
        //  判断有没有创建 有就删除
            if (this.LeiDaFanWeiList) {
                this.LeiDaFanWeiLayer.applyEdits({ deleteFeatures: this.LeiDaFanWeiList });
            }
            const LeiDaFanWei1 = new Circle({
                // center: [111.816293, 21.571691],
                center: p0,
                geodesic: true,
                numberOfPoints: 100,
                radius: 200, // 半径
                radiusUnit: "kilometers", // 单位
            });
            const LeiDaFanWei2 = new Circle({
                // center: [111.816293, 21.571691],
                center: p0,
                geodesic: true,
                numberOfPoints: 100,
                radius: 400,
                radiusUnit: "kilometers",
            });
            const LeiDaFanWei3 = new Circle({
                // center: [111.816293, 21.571691],
                center: p0,
                geodesic: true,
                numberOfPoints: 100,
                radius: 600,
                radiusUnit: "kilometers",
            });
            const LeiDaFanWei4 = new Circle({
                // center: [111.816293, 21.571691],
                center: p0,
                geodesic: true,
                numberOfPoints: 100,
                radius: 800,
                radiusUnit: "kilometers",
            });
            this.LeiDaFanWeiList = [
                {
                    geometry: LeiDaFanWei1,
                    attributes: { name: "" }
                },
                {
                    geometry: LeiDaFanWei2,
                    attributes: { name: "" }
                },
                {
                    geometry: LeiDaFanWei3,
                    attributes: { name: "" }
                },
                {
                    geometry: LeiDaFanWei4,
                    attributes: { name: "" }
                }
            ];
            this.LeiDaFanWeiLayer.applyEdits({ addFeatures: this.LeiDaFanWeiList });
        },