《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();
相关文章
|
5天前
|
JavaScript
Nest.js 实战 (十一):配置热重载 HMR 给服务提提速
这篇文章介绍了Nest.js服务在应用程序引导过程中,TypeScript编译对效率的影响,以及如何通过使用webpackHMR来降低应用实例化的时间。文章包含具体教程,指导读者如何在项目中安装依赖包,并在根目录下新增webpack配置文件webpack-hmr.config.js来调整HMR相关的配置。最后,文章总结了如何通过自定义webpack配置来更好地控制HMR行为。
|
3天前
|
缓存 JavaScript 前端开发
深入浅出:使用Node.js构建RESTful API
【9月更文挑战第3天】在数字化浪潮中,后端开发如同搭建一座连接用户与数据的桥梁。本文将带领读者从零开始,一步步用Node.js搭建一个功能完备的RESTful API。我们将探索如何设计API的结构、处理HTTP请求以及实现数据的CRUD操作,最终通过一个简单的实例,展示如何在真实世界中应用这些知识。无论你是初学者还是有一定经验的开发者,这篇文章都会为你揭示后端开发的奥秘,让你轻松入门并掌握这一技能。
16 3
|
10天前
|
JavaScript 前端开发 中间件
构建高效后端服务:Node.js与Express框架的完美搭档
【8月更文挑战第28天】在追求高性能、可扩展和易维护的后端开发领域,Node.js和Express框架的组合提供了一种轻量级且灵活的解决方案。本文将深入探讨如何利用这一组合打造高效的后端服务,并通过实际代码示例展示其实现过程。
|
8天前
|
存储 JavaScript NoSQL
构建高效Web应用:使用Node.js和Express框架
【8月更文挑战第30天】本文将引导你了解如何使用Node.js和Express框架快速搭建一个高效的Web应用。通过实际的代码示例,我们将展示如何创建一个简单的API服务,并讨论如何利用中间件来增强应用功能。无论你是新手还是有经验的开发者,这篇文章都将为你提供有价值的见解。
|
8天前
|
SQL 运维 监控
Nest.js 实战 (十):使用 winston 打印和收集日志记录
这篇文章介绍了在Nest服务中如何使用Winston记录日志。文章首先强调了日志记录在后台服务中的重要性,接着提到Nest默认的内部日志记录器,并指出可以通过@nestjs/common包中的Logger类来全面控制日志系统的行为。文章还提到,为了在生产环境中实现更高级的日志功能,可以使用如Winston之类的Node.js日志包。接下来,文章介绍了如何在Nest服务中使用Winston记录日志,包括安装相关依赖、创建winston配置文件以及实现简单的日志记录示例。最后,文章指出更高级的自定义日志功能需要读者自己去探索。
Nest.js 实战 (十):使用 winston 打印和收集日志记录
|
9天前
|
前端开发 JavaScript API
构建高效Web应用:React与Node.js的完美结合
【8月更文挑战第29天】在当今快速变化的软件开发领域,构建高性能、可扩展的Web应用成为开发者的首要任务。本文将深入探讨如何利用React和Node.js这两大技术栈,打造一个高效且响应迅速的现代Web应用。从前端的用户界面设计到后端的服务逻辑处理,我们将一步步分析这两种技术如何协同工作,提升应用性能,并确保用户体验的流畅性。通过实际代码示例和架构设计的解析,本篇文章旨在为读者提供一套清晰的指南,帮助他们在项目开发中做出更明智的技术选择。
|
7天前
|
JavaScript NoSQL API
深入浅出:使用Node.js构建RESTful API
【8月更文挑战第31天】本文将引导读者了解如何利用Node.js搭建一个高效、易于扩展的RESTful API。通过简单易懂的语言和逐步深入的内容组织,我们将一起探索Node.js在后端开发中的实际应用,包括环境配置、路由设计、数据处理与连接数据库等关键步骤。文章末尾,你将获得完整的项目代码示例,助你快速启动自己的API项目。
|
9天前
|
前端开发 JavaScript 开发者
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
本文提供了一个前端JS按钮点击事件、弹出式窗口和遮罩层的实战示例,包括HTML、CSS和JavaScript的具体实现代码,以及功能解析,演示了如何实现按钮点击后触发弹窗显示和遮罩层,并在2秒后自动关闭或点击遮罩层关闭弹窗的效果。
前端JS按钮点击事件、跳出弹窗、遮罩的实战示例
|
11天前
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的深度整合
【8月更文挑战第27天】 在现代Web开发中,后端服务的高效性至关重要。本文深入探讨了如何利用Node.js的非阻塞I/O特性和Express框架的简洁性来打造高性能的后端服务。我们将通过具体案例,展示如何在不牺牲代码可读性和可维护性的前提下,实现高效的请求处理和服务端逻辑。文章旨在为开发者提供一个清晰的指导,帮助他们在构建后端服务时做出更明智的技术选择。
|
12天前
|
JavaScript 前端开发 安全
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
JS 混淆解析:JS 压缩混淆原理、OB 混淆特性、OB 混淆JS、混淆突破实战
24 2
下一篇
DDNS