【03】openlayers 地图事件
绑定事件: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 地图事件的更多相关文章
- Google地图接口API之地图事件(四)
演示几个地图事件: 1. 点击标记缩放地图 仍然使用上一遍文章使用的英国伦敦的地图.点用户点击标记时实现缩放地图的功能(点击标记时绑定地图缩放事件). 代码如下: <html> <h ...
- 百度地图API的第一次接触——地图事件
0.初始化地图 var map = new BMap.Map("container"); var point = new BMap.Point(116.404, 39.915); ...
- Openlayers 地图定位到相应位置并缩放
说明: 在地图操作中,有个功能,需要点击一个点,将视图定位到点击点的位置,并放大. 解决方案: 1.可以有openlayers中可以有ol.View来控制,但是在更改时,会将地图初始化时设置的maxZ ...
- Android百度地图开发03之地图控制 + 定位
前两篇关于百度地图的blog写的是,一些基本图层的展示 和 覆盖物的添加+地理编码和反地理编码. 接下来,这篇blog主要说一些关于地图控制方面的内容和定位功能. 百度地图提供的关于地图的操作主要有: ...
- ArcGIS Runtime for Android开发教程V2.0(8)基础篇-----地图事件
转自:http://blog.csdn.net/arcgis_mobile/article/details/8263283 ArcGIS Runtime sdk for Android为我们提供了丰富 ...
- 【04】openlayers 地图弹框
效果: 创建地图: //创建地图 var map = new ol.Map({ //设置显示地图的视图 view: new ol.View({ projection: 'EPSG:4326', //投 ...
- 【11】openlayers 地图交互
地图交互interaction 关于map的方法: //添加地图交互 map.addInteraction(interaction) //删除地图交互 map.removeInteraction(in ...
- 【iScroll源码学习03】iScroll事件机制与滚动条的实现
前言 想不到又到周末了,周末的时间要抓紧学习才行,前几天我们学习了iScroll几点基础知识: 1. [iScroll源码学习02]分解iScroll三个核心事件点 2. [iScroll源码学习01 ...
- openlayers 注册事件例子
registerEvents:function() { this.events = new OpenLayers.Events(this, this.div, null, true); functio ...
随机推荐
- SLIQ/SPRINT
SLIQ/SPRINT */--> SLIQ/SPRINT Before SLIQ, most classification alogrithms have the problem that t ...
- 吴裕雄--天生自然python学习笔记:python用 Bokeh 模块绘制我国 GDP 数据统计图
现在我们把我国 1990 年到 2017 年的 GDP 数据抓取出 来,井用 Bokeh 绘 出散点统计图 . 由网页爬取所需数据,并用 Bokeh 绘制散点图 . import requests # ...
- TPO1-3 Timberline Vegetation on Mountains
Wind velocity also increase with altitude and may cause serious stress for trees,as is made evident ...
- [LC] 142. Linked List Cycle II
Given a linked list, return the node where the cycle begins. If there is no cycle, return null. To r ...
- u盘出现大文件无法复制的解决
如果u盘出现大文件无法复制的情况,修改U盘的文件系统格式: 把U盘格式化为NTFS格式. FAT32的都不能放4G+的文件;右键格式化里如果没有NTFS,就在开始运行里输入cmd 然后输入" ...
- web压测工具http_load
1.什么是http_loadhttp_load是一款基于Linux平台的web服务器性能测试工具,用于测试web服务器的吞吐量与负载,web页面的性能. 2.http_load的安装1)下载地址:ht ...
- Qt类声明中Q_OBJECT的作用与报错解决
2017-06-22 周四 大雨 北京 院里 新建作图类,继承自QCUstomPlot类 因为需要同时作8张图,都要单坐标缩放的功能,因此想干脆新建一个类,继承自QCUstomPlot,把需要的功能都 ...
- windows7 64位系统下无法运行ipython
windows7 64位系统下无法运行ipython | Creator 导航 导航 博客 分类 标签 友链 关于 大专栏 windows7 64位系统下无法运行ipythontent-post L ...
- 通俗易懂DenseNet
目录 写在前面 Dense Block与Transition Layer DenseNet网络架构与性能 理解DenseNet Plain Net.ResNet与DenseNet 参考 博客:博客园 ...
- bp(net core)+easyui+efcore实现仓储管理系统——入库管理之二(三十八)
abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统——ABP总体介绍(一) abp(net core)+ ...