《JavaScript构建Web和ArcGIS Server应用实战》——2.6 地图事件

简介:

本节书摘来自异步社区《JavaScript构建Web和ArcGIS Server应用实战》一书中的第2章,第2.6节,作者: 【美】Eric Pimpler(派普勒) 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.6 地图事件

在编程世界里,事件是发生在应用程序中的动作。通常,这些事件通过终端用户触发,包括鼠标单击、鼠标拖拽和键盘动作,但是它还包括数据的发送和接收、组件修改和其他操作。

ArcGIS API for JavaScript是一个异步的API,遵循应用程序注册(发布)事件的监听(用户)中的发布/订阅模式。图2-15说明了该过程。监听器负责监控应用程序中的事件,然后触发一个处理函数来响应事件。多个事件可以注册到同一个监听器中。dojo中的on()方法就是这样的一个事件处理程序。


be01ce44416185b1d2b271bee29778e5f5d12057

你可能还记得,ArcGIS ServerJavaScriptAPI建立在Dojo之上。使用Dojo,事件通过dojo的on()方法注册给处理程序。该方法接收三个参数,仔细观察图2-16,你会对事件注册有更好的理解。


<a href=https://yqfile.alicdn.com/d3fe0d9b8745f9855e1738cd87a3ea3fd309d573.png" >

我们调用带参数的on()方法,参数包括map、click和displayCoordinates。前面两个参数代表对象和我们需要注册的事件。在这种情况下,意味着我们正在为Map对象注册click事件。在地图范围内,每当用户单击鼠标就会触发此事件。最后一个参数displayCoordinates代表事件的监听器。因此,每当Map对象的click事件触发时,将会触发displayCoordinates函数,它将运行并报告地图当前范围。虽然事件和注册的处理取决于环境的变化,但是注册的方法是一样的。

每次事件发生时,Event对象将产生。该Event对象包括额外的事件信息,比如鼠标按钮被单击或者键盘某个按键被按下。这个对象会自动传递到事件处理程序中检查。如下列代码所示,你可以看到Event对象作为一个参数传递到了处理程序中。这是一个动态对象,它的属性也会根据被触发的事件类型而发生变化。

function addPoint(evt) {
    alert(evt.mapPoint.x, evt.mapPoint.y);
}

API中不同对象有着不同的事件。但是,你要牢记不要用监听器来注册每一个事件。只有那些应用程序中需要的事件才需要注册。当一个事件没有使用监听器进行注册时,该事件会被忽略。

Map对象包含多种不同响应事件,包括各种鼠标事件、范围改变事件、底图改变事件、键盘事件、图层事件、平移和缩放事件以及更多其他事件。应用程序中可以响应任意这些事件。在接下来的章节中,我们将学习其他对象可用的事件。

在不需要的时候,从处理函数中断开事件是一个好的编程习惯。这通常在当用户从页面导航离开或者关闭浏览器窗口时完成。下列代码显示了如何简单地通过调用remove()方法完成移除单击事件。

var mapClickEvent = on(myMap, "click", displayCoordinates);
mapClickEvent.remove();
相关文章
|
JavaScript 前端开发
如何减少Node.js应用中的全局变量?
如何减少Node.js应用中的全局变量?
758 165
|
存储 前端开发 Java
【JAVA】Java 项目实战之 Java Web 在线商城项目开发实战指南
本文介绍基于Java Web的在线商城技术方案与实现,涵盖三层架构设计、MySQL数据库建模及核心功能开发。通过Spring MVC + MyBatis + Thymeleaf实现商品展示、购物车等模块,提供完整代码示例,助力掌握Java Web项目实战技能。(238字)
1340 0
|
人工智能 自然语言处理 JavaScript
通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
通义灵码基于自然语言需求,快速生成完整Vue组件。例如,用Vue 2和JavaScript实现贪吃蛇游戏:包含键盘控制、得分系统、游戏结束判定与Canvas动态渲染。AI生成的代码符合规范,支持响应式数据与事件监听,还能进阶优化(如增加启停按钮、速度随分数提升)。传统需1小时的工作量,使用通义灵码仅10分钟完成,大幅提升开发效率。操作简单:安装插件、输入需求、运行项目即可实现功能。
748 4
 通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
存储 监控 JavaScript
基于布隆过滤器的 Node.js 算法在局域网电脑桌面监控设备快速校验中的应用研究
本文探讨了布隆过滤器在局域网电脑桌面监控中的应用,分析其高效空间利用率、快速查询性能及动态扩容优势,并设计了基于MAC地址的校验模型,提供Node.js实现代码,适用于设备准入控制与重复数据过滤场景。
411 0
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
存储 JavaScript 安全
Web渗透-XSS漏洞深入及xss-labs靶场实战
XSS(跨站脚本攻击)是常见的Web安全漏洞,通过在网页中注入恶意脚本,窃取用户信息或执行非法操作。本文介绍其原理、分类(反射型、存储型、DOM型)、测试方法及xss-labs靶场实战案例,帮助理解与防御XSS攻击。
3317 1
Web渗透-XSS漏洞深入及xss-labs靶场实战
|
12月前
|
运维 监控 JavaScript
基于 Node.js 图结构的局域网设备拓扑分析算法在局域网内监控软件中的应用研究
本文探讨图结构在局域网监控系统中的应用,通过Node.js实现设备拓扑建模、路径分析与故障定位,提升网络可视化、可追溯性与运维效率,结合模拟实验验证其高效性与准确性。
617 3
|
安全 Linux PHP
Web渗透-命令执行漏洞-及常见靶场检测实战
命令执行漏洞(RCE)指应用程序调用系统命令时,用户可控制输入参数,导致恶意命令被拼接执行,从而危害系统安全。常见于PHP的system、exec等函数。攻击者可通过命令连接符在目标系统上执行任意命令,造成数据泄露或服务瘫痪。漏洞成因包括代码层过滤不严、第三方组件缺陷等。可通过参数过滤、最小权限运行等方式防御。本文还介绍了绕过方式、靶场测试及复现过程。
2161 0