绑定事件:map.on(type, listener)

取消绑定:map.un(type, listener)

type:事件类型

listener:执行得函数体

事件类型:

//事件类型
let type = {
click:'click',//单击
dblclick:'dblclick',//双击,双击会触发click
singleclick:'singleclick',//单击,延迟250毫秒,就算双击不会触发
moveend:'moveend',//鼠标滚动事件
pointermove:'pointermove',//鼠标移动事件
pointerdrag:'pointerdrag',//鼠标拖动事件
precompose:'precompose',//地图准备渲染,为渲染
postcompose:'postcompose',//地图渲染中
postrender:'postrender',//地图渲染全部结束
changeLayerGroup:'change:layerGroup',//地图图层增删时触发
changeSize:'change:size',//地图窗口发生变化就会触发
changeTarget:'change:target',//地图绑定的div发生更改时触发
changeView:'change:view',//地图view对象发生变化触发
propertychange:'propertychange',//Map对象中任意的property值改变时触发
}

例子:

//绑定事件
let fn = function(e){
console.log(e)
}
map.on(type.click,fn) //取消绑定
setTimeout(()=>{
map.un(type.click,fn)
},3000)

通常结合使用的方法:

map.forEachFeatureAtPixel(pixel, callback)

map.on('click',function(e){
//屏幕坐标
let pixel = this.map.getEventPixel(e.originalEvent);
//检测与视口上的像素相交的要素
map.forEachFeatureAtPixel(pixel,function(feature,layers){
//feature,返回的要素
console.log(feature)
//layers,返回的图层
console.log(layers)
})
})

【03】openlayers 地图事件的更多相关文章

  1. Google地图接口API之地图事件(四)

    演示几个地图事件: 1. 点击标记缩放地图 仍然使用上一遍文章使用的英国伦敦的地图.点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件). 代码如下: <html> <h ...

  2. 百度地图API的第一次接触——地图事件

    0.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...

  3. Openlayers 地图定位到相应位置并缩放

    说明: 在地图操作中,有个功能,需要点击一个点,将视图定位到点击点的位置,并放大. 解决方案: 1.可以有openlayers中可以有ol.View来控制,但是在更改时,会将地图初始化时设置的maxZ ...

  4. Android百度地图开发03之地图控制 + 定位

    前两篇关于百度地图的blog写的是,一些基本图层的展示 和 覆盖物的添加+地理编码和反地理编码. 接下来,这篇blog主要说一些关于地图控制方面的内容和定位功能. 百度地图提供的关于地图的操作主要有: ...

  5. ArcGIS Runtime for Android开发教程V2.0(8)基础篇-----地图事件

    转自:http://blog.csdn.net/arcgis_mobile/article/details/8263283 ArcGIS Runtime sdk for Android为我们提供了丰富 ...

  6. 【04】openlayers 地图弹框

    效果: 创建地图: //创建地图 var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ projection: 'EPSG:4326', //投 ...

  7. 【11】openlayers 地图交互

    地图交互interaction 关于map的方法: //添加地图交互 map.addInteraction(interaction) //删除地图交互 map.removeInteraction(in ...

  8. 【iScroll源码学习03】iScroll事件机制与滚动条的实现

    前言 想不到又到周末了,周末的时间要抓紧学习才行,前几天我们学习了iScroll几点基础知识: 1. [iScroll源码学习02]分解iScroll三个核心事件点 2. [iScroll源码学习01 ...

  9. openlayers 注册事件例子

    registerEvents:function() { this.events = new OpenLayers.Events(this, this.div, null, true); functio ...

随机推荐

  1. python数据类型:字符串

    字符串是python中最常见的数据类型,使用单引号或双引号创建字符串 python不支持单字符类型,单字符在python中也是字符串 文档原文:http://www.runoob.com/python ...

  2. C# 开启线程的几种方式

    1.异步委托开启线程 public static void Main(string[] args) { Action<int,int> a=add; a.BeginInvoke(,,nul ...

  3. 【Linux_Shell 脚本编程学习笔记一、条件表达式】

    条件表达式返回的结果都为布尔型 真为1,假为0 条件测试的表达式 [expression] 比较符 整数比较 -eq:比较两个整数是否相等,$A -eq $B -ne:测试两个整数是否不等,不等则为真 ...

  4. node.js 和 npm/cnpm/nrm 的安装

    node.js 和 npm/cnpm/nrm 的安装 安装 node.js.去 官网 下载,下载 LTS 版本的.安装时一路点确定,不要改动任何设置. 在 git-bash 或是 cmd 下,输入 n ...

  5. c++ 如何清除上一次的输出?

    #include <iostream.h>#include <stdlib.h>int main(){cout<<"PBY PBY PBY PBY PBY ...

  6. Mysql数据导出到excel-基于python

    阅读本文大概需要 6分钟. 数据除了在测试平台显示,有时候也会习惯用excel以及邮件展示,那么我们可以在测试平台上加一个导出excel功能,方便操作,下面介绍主要代码以及逻辑. 使用操作数据库的py ...

  7. Annotation标注

    # View more python tutorials on my Youtube and Youku channel!!! # Youtube video tutorial: https://ww ...

  8. 解密JDK8 枚举

    写一个枚举类 1 2 3 4 5 6 public enum Season { SPRING, SUMMER, AUTUMN, WINTER } 然后我们使用javac编译上面的类,得到class文件 ...

  9. Linux用户与用户组的关系

    一.用户和用户组文件 1. /etc/passwd:所创建的用户账号和信息均存放在次文件中,所有用户可读取: 最后一个字段的值一般为/sbin/nologin,表示该账号不能用来登陆linux系统: ...

  10. sql问题处理

    批量杀死MySQL连接 select concat('KILL ',id,';') from information_schema.processlist where Info like 'selec ...