OL3-Cesium 二三维鼠标事件统一处理
like the github issue:
https://github.com/openlayers/ol3-cesium/issues/344#issuecomment-214098148
thanks jmgomezpoveda .
i find the way to deal with it.
key point is: brower events and pixel happened.
sucess click and move event.
code:
//二维三维的地图点击事件
// https://github.com/openlayers/ol3/blob/v3.19.0/src/ol/events/eventtype.js
define(['watermap'],function(watermap) {
var clickHandler; var layerNameFliter;
/**
* initMapEvents - 初始化地图事件 鼠标移动以及鼠标单击事件
*
*
* @return {type} Description
*/
var initMapEvents = function() { $('#' + watermap.config.target).on('mousemove touchmove', function(browserEvent) {
var pixel = watermap.map.getEventPixel(browserEvent.originalEvent);
HandleFeaturesAtPixelForMove(pixel);
});
$('#' + watermap.config.target).on('click touchstart', function(browserEvent) {
var pixel = watermap.map.getEventPixel(browserEvent.originalEvent);
var features = getFeaturesAtPixelForClick(pixel);
if (watermap.MapEvent.clickHandler) {
watermap.MapEvent.clickHandler(features);
}
});
};
/**
* setLayerFliters - 设置点击以及鼠标滑过去的图层过滤
*
* @param {type} layerNameArray Description
*
* @return {type} Description
*/
var setLayerFliters = function(layerNameArray) {
this.layerNameFliter = layerNameArray;
};
var addClickHandle = function(handler) {
if (handler && typeof(handler) == 'function') {
this.clickHandler = handler;
} else {
console.log("click handler you add is not a function");
}
};
/**
* HandleFeaturesAtPixelForMove - 依据pixel 获取对应的ol.features - Description
*
* @param {type} pixel Description
*
* @return {type} Description
*/
var HandleFeaturesAtPixelForMove = function(pixel) {
var features = [];
if (watermap.ol3d && watermap.ol3d.getEnabled()) {
var pickedObject = watermap.ol3d.getCesiumScene().pick(new Cesium.Cartesian2(pixel[0], pixel[1]));
watermap.ol3d.canvas_.style.cursor = 'auto';
if (typeof pickedObject !== "undefined") {
// features.push(pickedObject.primitive.olFeature);
watermap.ol3d.canvas_.style.cursor = 'pointer';
}
} else {
watermap.map.getViewport().style.cursor = 'auto';
watermap.map.forEachFeatureAtPixel(pixel, function(feature) {
watermap.map.getViewport().style.cursor = 'pointer';
},
undefined,
function(layer) { //标注图层过滤
var layerName = layer.get('name');
if (watermap.MapEvent.layerNameFliter && watermap.MapEvent.layerNameFliter.indexOf(layerName)>=0) {
return true;
}
return false;
});
}
return features;
};
/**
* getFeaturesAtPixelForClick - 依据pixel 获取对应的ol.features - Description
*
* @param {type} pixel Description
*
* @return {type} Description
*/
var getFeaturesAtPixelForClick = function(pixel) {
var features = [];
if (watermap.ol3d && watermap.ol3d.getEnabled()) {
var pickedObject = watermap.ol3d.getCesiumScene().pick(new Cesium.Cartesian2(pixel[0], pixel[1]));
if (typeof pickedObject !== "undefined") {
features.push(pickedObject.primitive.olFeature);
}
} else {
watermap.map.forEachFeatureAtPixel(pixel, function(feature) {
var featureShow;
features.push(feature);
},
undefined,
function(layer) { //标注图层过滤
var layerName = layer.get('name');
if (watermap.MapEvent.layerNameFliter && watermap.MapEvent.layerNameFliter.indexOf(layerName)>=0) {
return true;
}
return false;
});
}
return features;
}; return {
initMapEvents:initMapEvents,
clickHandler: clickHandler,
layerNameFliter: layerNameFliter,
setLayerFliters:setLayerFliters,
addClickHandle: addClickHandle,
};
});
OL3-Cesium 二三维鼠标事件统一处理的更多相关文章
- Redis总结(五)缓存雪崩和缓存穿透等问题 Web API系列(三)统一异常处理 C#总结(一)AutoResetEvent的使用介绍(用AutoResetEvent实现同步) C#总结(二)事件Event 介绍总结 C#总结(三)DataGridView增加全选列 Web API系列(二)接口安全和参数校验 RabbitMQ学习系列(六): RabbitMQ 高可用集群
Redis总结(五)缓存雪崩和缓存穿透等问题 前面讲过一些redis 缓存的使用和数据持久化.感兴趣的朋友可以看看之前的文章,http://www.cnblogs.com/zhangweizhon ...
- Javascript事件模型系列(二)事件的捕获-冒泡机制及事件委托机制
一.事件的捕获与冒泡 由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...
- javaScript事件(二)事件处理程序
一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
- C#总结(二)事件Event 介绍总结
最近在总结一些基础的东西,主要是学起来很难懂,但是在日常又有可能会经常用到的东西.前面介绍了 C# 的 AutoResetEvent的使用介绍, 这次介绍事件(event). 事件(event),对于 ...
- cesium清除选定事件
cesium清除选定事件 此处的案例不一定适合你的项目,但可以给你一个思路.清除选定,就是还原你选中之前的状态.比如你点击一个面高亮,面的颜色发生改变:并且会弹出一个divPoint框.此时的清除选定 ...
- C#特性知识图谱-二、事件
C#特性知识图谱-二.事件 二.事件 在事件驱动的软件系统中,符合某种预设条件的情形出现是,一个事件就会被触发. 2.1 事件三要素 事件源:激发事件的对象 事件信息:事件本身说携带的信息 事件响应者 ...
- 深入理解JS异步编程二(分布式事件)
PubSub模式 从原生的js角度,我们要监听某事件的方法就是利用addEventListener方法,但是当我们的页面趋于复杂,比如要向某个元素添加多个处理事件,那么就要用一个封装函数汇集多个处理函 ...
- Nodejs学习笔记(二)—事件模块
一.简介及资料 http://nodejs.org/api/events.html http://www.infoq.com/cn/articles/tyq-nodejs-event events ...
- springboot-web进阶(二)——AOP统一处理请求
一.AOP使用示例 AOP的概述在spring篇已经存在,这里不再赘述 1.准备 引入依赖 <dependency> <groupId>org.springframework. ...
- 八十八、SAP中ALV事件之二,事件的定义和事件子例程
一.我们来到SE37,找到REUSE_ALV_EVENTS_GET相关的定义 二.我们需要用到下面这3个事件 三.我们添加一个第五步,并把显示ALV座位第六步.在第五步中定义三个事件 四.在末尾,添加 ...
随机推荐
- 读Java8函数式编程笔记06_Lambda表达式编写并发程序
1. 阻塞式I/O 1.1. 一种通用且易于理解的方式,因为和程序用户的交互通常符合这样一种顺序执行的方式 1.2. 将系统扩展至支持大量用户时,需要和服务器建立大量TCP连接,因此扩展性不是很好 2 ...
- petite-vue和Vue的比较
petite-vue不止是变得更小,它还是渐进式增强的最佳实践. Vue不构建或构建都能使用.当通过构建使用时(例如使用单文件组件),Vue预编译所有的模板,所以运行时没有再处理模板.多亏了树摇(th ...
- (转载)Python中关键词yield怎么用?
原文: https://stackoverflow.com/questions/231767/what-does-the-yield-keyword-do 译文: https://zhuanlan.z ...
- 企业微信集成openai实现ChatGPT机器人
背景: 现在网上查资料,痛点太多了,什么广告,什么重复的,对于程序员的我来说,简直是无语 最近接触到ChatGpt,问了些技术问题,答的比某度好,甚至可以写代码,真的太棒了 因此想写个专门的机器人,给 ...
- Feign远程调用 (介绍与使用)
Feign远程调用 Feign是代替RestTemplate进行远程调用的组件,避免了RestTemplate手写复杂的url容易出错的问题,并提高代码的可读性 使用Feign步骤 1)引入依赖 哪个 ...
- springboot如何在拦截器中拦截post请求参数以及解决文件类型上传问题
我们经常有这样一个场景,比如:在springboot拦截器中想截取post请求的body参数做一些中间处理,或者用到自定义注解,想拦截一些特定post请求的方法的参数,记录一些请求日志. 想到了使 ...
- 关于vux-ui框架的scroller组件所踩的坑
这是我在做一个demo的一个上垃加载下拉刷新功能时所遇到的问题,由于伤了好一会脑筋,所以留下这篇笔记以供后续查询: 在上代码前建议在开发项目时不要优先选择vux这个框架,因为有一些常用的功能组件官方已 ...
- .NET 8 预览版 1:NativeAOT 升级和新的Blazor United
.NET团队 今天在官方博客上 发布了.NET 8的第一个预览版,.NET 8 是一个长期支持 (LTS) 版本[1],.NET 的版本包括产品.库.运行时和工具,是 Microsoft 内部和外部多 ...
- aop中的名词解释
aop中的名词解释 aop spring Joinpoint(连接点) 目标对象中所有可以增强的方法叫做连接点 Pointcut(切入点) 目标对象中要增强的的方法 Advice(通知/增强) 增强的 ...
- LG P2617 Dynamic Rankings
\(\text{Problem}\) 动态区间第 \(k\) 小 Dynamic Rankings \(\text{Analysis}\) 整体二分 原本一个询问可二分,但多个询问效率太低 考虑离线, ...