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

news2024/11/28 4:39:36

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)
    }
}

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

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

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

3. 最终效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/992504.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数学建模B多波束测线问题B

数学建模多波束测线问题 1.问题重述: 单波束测深是一种利用声波在水中传播的技术来测量水深的方法。它通过测量从船上发送声波到声波返回所用的时间来计算水深。然而,由于它是在单一点上连续测量的,因此数据在航迹上非常密集,但…

云备份——服务端客户端联合测试

一,准备工作 服务端清空备份文件信息、备份文件夹、压缩文件夹 客户端清空备份文件夹 二,开始测试 服务端配置文件 先启动服务端和客户端 向客户端指定文件夹放入稍微大点的文件,方便后续测试断点重传 2.1 上传功能测试 客户端自动上传成功…

【Altium Designer】AD20教程,实战,作图(一)

文章目录 完整制图方法1、建立一个完整的PCB工程,需要有sch文件、pcb文件、schlib文件、pcblib文件,后面两个不是必须的,后面两个用来自己创建库里面没有的东西。2、这个时候就可以画 原理图 ,这里我提一下库这个东西。3、画原理图4、编译原理…

系统架构设计师(第二版)学习笔记----计算机语言

【原文链接】系统架构设计师(第二版)学习笔记----计算机语言 文章目录 一、计算机语言的组成1.1 计算机语言的分类 二、机器语言2.1 机器语言指令信息2.2 机器语言指令格式的种类 三、汇编语言3.1 汇编语言中语句种类3.2 汇编语言指令和伪指令的语句格式…

数字孪生的深海迷航

上世纪70年代,美国宇航局(NASA)筹划构建复杂的大型载人航天器。当时科学家们发现,航天任务进行当中,航天器的维护和修理面临着环境复杂、危险性高、故障不易排查等问题。 与其“盲人摸象”式的找故障,不如干…

WRF DA环境需求、系统安装、调试与运行丨WRF DA变分资料同化、WRF DA混合同化新方法

目录 专题一 资料同化的基本理论与方法 专题二 WRF DA的环境需求、系统安装、调试与运行 专题三 观测资料与质量控制 专题四 WRF DA同化系统的配置、背景误差的构造 专题五 WRF DA变分资料同化、WRF DA混合同化新方法 专题六 变分同化的单点试验、混合同化的单点试验 专…

机器学习——Logistic Regression

0、前言: Logistic回归是解决分类问题的一种重要的机器学习算法模型 1、基本原理: Logistic Regression 首先是针对二分类任务提出的一种分类方法如果将概率看成一个数值属性,则二元分类问题的概率预测就可以转化为一个回归问题。这种思路最…

B Antiamuny wants to leaern binary search again

题目&#xff1a; C/C: int f(int l,int r,int x) { // l < x < rint cnt 0;while(l < r) {cnt;int mid (l r) / 2;if (mid x) break;if (mid < x) l mid 1;else r mid - 1;}return cnt; } 样例&#xff1a; 输入 5 3 7 2 6 12 2 2 10 3 6 14 8 5 8 1 输…

java实现调用百度地图

这里使用的springbootthymeleaf实现&#xff0c;所以需要有springboot技术使用起来更方便 当然&#xff0c;只使用html加js也可以实现&#xff0c;下面直接开始 首先我们需要去百度地图注册一个AK&#xff08;百度地图开放平台 | 百度地图API SDK | 地图开发&#xff09; 找到左…

神经网络与强化学习:揭示AI的超能力

文章目录 神经网络&#xff1a;模拟人脑的工具强化学习&#xff1a;通过试错学习结合神经网络和强化学习价值网络策略网络结合训练 应用领域游戏机器人控制金融交易 未来趋势自动化和自主系统个性化和自适应系统跨学科研究 结论 &#x1f389;欢迎来到AIGC人工智能专栏~神经网络…

谷粒商城----缓存与分布式锁

1、缓存使用 为了系统性能的提升&#xff0c;我们一般都会将部分数据放入缓存中&#xff0c;加速访问。而 db 承担数据落盘工作。 哪些数据适合放入缓存&#xff1f;  即时性、数据一致性要求不高的  访问量大且更新频率不高的数据&#xff08;读多&#xff0c;写少&…

day3_C++

day3_C 思维导图用C的类完成数据结构 栈的相关操作用C的类完成数据结构 循环队列的相关操作 思维导图 用C的类完成数据结构 栈的相关操作 stack.h #ifndef STACK_H #define STACK_H#include <iostream> #include <cstring>using namespace std;typedef int datat…

SplitMask:大规模数据集是自我监督预训练的必要条件吗?

自监督预训练需要大规模数据集吗?这是2021年发布的一篇论文&#xff0c;它在自监督预训练场景中使用小数据集&#xff0c;如Stanford Cars, Sketch或COCO&#xff0c;它们比ImageNet小几个数量级。并提出了一种类似于BEiT的去噪自编码器的变体SplitMask&#xff0c;它对预训练…

光伏发电双向电能表DTSD1352

安科瑞 华楠 DTSD1352 导轨式多功能电能表&#xff0c;是主要针对电力系统&#xff0c;工矿企业&#xff0c;公用设施的电能统 计、管理需求而设计的一款智能仪表&#xff0c;产品具有精度高、体积小、安装方便等优点。集成常 见电力参数测量及电能计量及考核管理&#xff0c;…

PY32F003F18之RS485通讯

PY32F003F18将USART2连接到RS485芯片&#xff0c;和其它RS485设备实现串口接收后再转发的功能。 一、测试电路 二、测试程序 #include "USART2.h" #include "stdio.h" //getchar(),putchar(),scanf(),printf(),puts(),gets(),sprintf() #include "…

2.10 PE结构:重建重定位表结构

Relocation&#xff08;重定位&#xff09;是一种将程序中的一些地址修正为运行时可用的实际地址的机制。在程序编译过程中&#xff0c;由于程序中使用了各种全局变量和函数&#xff0c;这些变量和函数的地址还没有确定&#xff0c;因此它们的地址只能暂时使用一个相对地址。当…

二十、MySQL多表关系

1、概述 在项目开发中&#xff0c;在进行数据库表结构设计时&#xff0c;会根据业务需求以及业务模块之间的关系&#xff0c;分析并设计表结构&#xff0c;由于业务之间相互关联&#xff0c;所以各个表结构之间也存在着各种对应关系 2、多表关系分类 &#xff08;1&#xff0…

2023大数据挑战赛全国六强团队获奖经验+ppt分享(四)

团队名称 陛下请移步至地下室 团队成员 张晓立&#xff08;华东师范大学&#xff09; 团队名次 全国第三名 赛题描述说明介绍 2023大数据挑战赛赛题说明决赛评分标准回顾 参赛分享与收获 大赛提供了非常丰富有趣的数据&#xff0c;能把数据分析明白就能获得高分。首先分析metri…

Delphi、C# 和 TypeScript 之父 Anders Hejlsberg(安德斯·海尔斯伯格,海神)赶潮AI

自2022年11月ChatGPT横空出世&#xff0c;一波由AIGC引发的热潮轰轰烈烈持续传播。 全球各国政府及大型互联网企业都在积极布局人工智能解决方案&#xff0c;抢占人工智能高地&#xff0c;推动人工智能产业健康发展。 Delphi、C# 和 TypeScript 之父&#xff0c;位列Microsof…

口袋参谋:如何规避差评风险?一招让你实现宝贝0差评!

​作为卖家&#xff0c;不会还有人不知道差评的威力吧&#xff01; 如果你宝贝销量大&#xff0c;差评率本身就低&#xff0c;偶尔一个差评可能影响不大。 但如果你是新宝贝上架&#xff0c;销量少的可怜&#xff0c;差评就是重磅炸弹&#xff0c;99.99%让店铺的评分绿得发亮…