《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();
相关文章
|
9天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
10天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
25天前
|
监控 Serverless 测试技术
Serverless 应用引擎常见问题之做的web服务计费如何解决
Serverless 应用引擎(Serverless Application Engine, SAE)是一种完全托管的应用平台,它允许开发者无需管理服务器即可构建和部署应用。以下是Serverless 应用引擎使用过程中的一些常见问题及其答案的汇总:
329 3
|
15天前
|
JavaScript
事件触发、事件捕获与事件冒泡(js的问题)
事件触发、事件捕获与事件冒泡(js的问题)
|
2天前
|
缓存 负载均衡 数据库
优化后端性能:提升Web应用响应速度的关键策略
在当今数字化时代,Web应用的性能对于用户体验至关重要。本文探讨了如何通过优化后端架构和技术手段,提升Web应用的响应速度。从数据库优化、缓存机制到异步处理等多个方面进行了深入分析,并提出了一系列实用的优化策略,以帮助开发者更好地应对日益增长的用户访问量和复杂的业务需求。
9 1
|
3天前
|
缓存 监控 数据库
Flask性能优化:打造高性能Web应用
【4月更文挑战第16天】本文介绍了提升Flask应用性能的七大策略:优化代码逻辑,减少数据库查询,使用WSGI服务器(如Gunicorn、uWSGI),启用缓存(如Flask-Caching),优化数据库操作,采用异步处理与并发(如Celery、Sanic),以及持续监控与调优。通过这些手段,开发者能有效优化Flask应用,适应大型或高并发场景,打造高性能的Web服务。
|
4天前
|
数据库 开发者 Python
Python中使用Flask构建简单Web应用的例子
【4月更文挑战第15天】Flask是一个轻量级的Python Web框架,它允许开发者快速搭建Web应用,同时保持代码的简洁和清晰。下面,我们将通过一个简单的例子来展示如何在Python中使用Flask创建一个基本的Web应用。
|
8天前
|
JavaScript 前端开发 API
Vue.js:构建高效且灵活的Web应用的利器
Vue.js:构建高效且灵活的Web应用的利器
|
15天前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox与Grid布局的深度对比
【4月更文挑战第4天】 在现代前端开发中,构建灵活且响应式的用户界面是至关重要的。随着移动设备浏览量的增加,能够适应不同屏幕尺寸和分辨率的布局技术变得必不可少。Flexbox和Grid是CSS提供的两种强大的布局机制,它们各自以独特的方式解决了响应式设计的挑战。本文将深入探讨Flexbox和Grid的核心概念、使用场景和性能考量,为开发者提供在面对不同布局需求时做出明智选择的依据。
|
16天前
|
XML JSON JavaScript
使用JSON和XML:数据交换格式在Java Web开发中的应用
【4月更文挑战第3天】本文比较了JSON和XML在Java Web开发中的应用。JSON是一种轻量级、易读的数据交换格式,适合快速解析和节省空间,常用于API和Web服务。XML则提供更强的灵活性和数据描述能力,适合复杂数据结构。Java有Jackson和Gson等库处理JSON,JAXB和DOM/SAX处理XML。选择格式需根据应用场景和需求。