Openlaye:学习笔记之事件
发布日期:2021-06-30 15:43:03
浏览次数:3
分类:技术文章
本文共 1072 字,大约阅读时间需要 3 分钟。
首先来看一个案例:当我们点击地图的时候,会弹出一个提示框,
OpenLayers 地图示例
任意的事件应用,必然会有三个步骤:
-
找准事件发送者,比如上面这个例子,map就是事件发送者。 如何找到它呢? 一般都是要交互的对象。
-
找准事件名称,比如上面例子中的singleclick,切忌不要随便想象,或者按照惯例来写名称,初次使用,请一定参照API文档,不然后果自负。 如何参看一个类有什么事件? 请参见看懂API。
-
编写事件响应函数,在OpenLayers中,事件发送者都会有一个名字为on的函数,调用这个函数,就能监听指定的事件,响应函数listener具有一个参数event,这个event类就对应于API文档中事件名称后边括号里的类。
注销事件影响
比如有一个引导用户使用的需求,用户第一次点击地图的时候,需要弹出一个使用说明,之后点击地图就不用再弹出这个使用说明了。
我们可以使用map.un进行注销监听
var singleclickListener = function (event) { alert("取消监听事件") map.un('singleclick',singleclickListener); }; map.on('singleclick',singleclickListener);
使用map.once也可以仅执行一次监听事件
map.once('singleclick',function (event) { alert('单次监听事件'); })
常用事件
常用鼠标事件
-
地图鼠标左键单击事件
对应的类为ol.Map,事件名为singleclick。 -
地图鼠标左键双击事件
对应的类为ol.Map,事件名为dblclick。 -
地图鼠标点击事件
对应的类为ol.Map,事件名为click。 -
地图鼠标移动事件
对应的类为ol.Map,事件名为pointermove。 -
地图鼠标拖拽事件
对应的类为ol.Map,事件名为pointerdrag。 -
地图移动事件
对应的类为ol.Map,事件名为moveend。
非直接交互事件
-
非直接交互事件
地图缩放事件 对应的类为ol.View,事件名为 change:resolution,为什么? 因为分辨率改变了,自然层级就变化了。 -
地图中心改变事件
对应的类是ol.View,事件名为 change:center。
转载地址:https://kaisarh.blog.csdn.net/article/details/103181712 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2024年05月03日 03时33分21秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
基于java的ssm框架就业信息管理系统的设计
2019-04-30
如何用同期群分析模型提升留存?(Tableau实战)
2019-04-30
Oracle字符串分隔符替换(替换奇数个或偶数个)
2019-04-30
Oracle 利用 UTL_SMTP 包发送邮件
2019-04-30
Oracle 的循环中的异常捕捉和处理
2019-04-30
Oracle的pfile和spfile的一点理解和笔记
2019-04-30
java实现稀疏数组及将稀疏数组存入硬盘中
2019-04-30
2021-05-18
2019-04-30
libuv实现ping包发送和接收
2019-04-30
基础架构系列篇-系统centos7安装docker+COMPOSE
2019-04-30
基础架构系列篇-NGINX部署VUE
2021-07-03
基础架构系列篇-系统centos7安装kafka
2021-07-03
软件质量的8个特性
2019-04-30
2021年不可错过的17种JS优化技巧(一)
2019-04-30
在 Vue 中用 Axios 异步请求API
2019-04-30
MySQL进阶查询(SELECT 语句高级用法)
2019-04-30
Mysql 之主从复制
2019-04-30
【NLP学习笔记】中文分词(Word Segmentation,WS)
2019-04-30
对于时间复杂度的通俗理解
2019-04-30
如何输入多组数据并输出每组数据的和?
2019-04-30