Cesium实现右键框选
思路
1、先取消地图的右键事件
2、右键框选事件,屏幕坐标转为经纬度坐标
取消地图的右键事件
//此处容易犯一个错误:以为右键事件绑定了缩放功能,伪代码即 Cesium.MouseEvent.右键事件 = 地图缩放()
//踩坑后才发现,正确的是缩放(平移...等)事件绑定按钮类型。
//cesium默认右键为放大缩小,此处给zoomEventTypes设置新值
viewer.scene.screenSpaceCameraController.zoomEventTypes=[Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK]
//earthsdk默认右键为改变视角,此处禁止。
viewer.scene.screenSpaceCameraController.lookEventTypes=[]
右键框选事件,屏幕坐标转为经纬度坐标
//右键按下标识
var flag = false
//起点终点x,y
var startX = null;
var startY = null;
var endX = null;
var endY = null;
//创建框选元素
var selDiv = document.createElement("div")
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
//右键按下事件,设置起点,div设置样式和位置,添加到页面
handler.setInputAction(function (event) {
flag = true
startX = event.position.x
startY = event.position.y
selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;";
selDiv.id = "selectDiv";
selDiv.style.left = startX + "px";
selDiv.style.top = startY + "px";
document.body.appendChild(selDiv);
}, Cesium.ScreenSpaceEventType.RIGHT_DOWN);
//鼠标抬起事件,获取div坐上和右下的x,y 转为经纬度坐标
handler.setInputAction(function (event) {
flag = false
var l = parseInt(selDiv.style.left);
var t = parseInt(selDiv.style.top);
var w = parseInt(selDiv.style.width);
var h = parseInt(selDiv.style.height);
var earthPosition = _earth._viewer.camera.pickEllipsoid({x:l,y:t}, _earth._viewer.scene.globe.ellipsoid);
var cartographic = Cesium.Cartographic.fromCartesian(earthPosition, _earth._viewer.scene.globe.ellipsoid, new Cesium.Cartographic());
console.log("左上坐标为:"+[Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude)])
earthPosition = _earth._viewer.camera.pickEllipsoid({x:l+w,y:t+h}, _earth._viewer.scene.globe.ellipsoid);
cartographic = Cesium.Cartographic.fromCartesian(earthPosition, _earth._viewer.scene.globe.ellipsoid, new Cesium.Cartographic());
console.log("右下坐标为:"+[Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude)])
//根据业务确定是否删除框选div
document.getElementById("selectDiv").parentNode.removeChild(document.getElementById("selectDiv"))
}, Cesium.ScreenSpaceEventType.RIGHT_UP);
//鼠标移动事件,处理位置css
handler.setInputAction(function (event) {
if (flag) {
endX = event.endPosition.x
endY = event.endPosition.y
selDiv.style.left = Math.min(endX, startX) + "px";
selDiv.style.top = Math.min(endY, startY) + "px";
selDiv.style.width = Math.abs(endX - startX) + "px";
selDiv.style.height = Math.abs(endY - startY) + "px";
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
若右键框选完后弹出浏览器菜单
document.oncontextmenu = function() { return false;}
效果
Cesium实现右键框选的更多相关文章
- [转]结合轮廓显示,实现完整的框选目标(附Demo代码)
原地址:http://www.cnblogs.com/88999660/articles/2887078.html 几次看见有人问框选物体的做法,之前斑竹也介绍过,用画的框生成的视椎,用经典图形学的视 ...
- unity3d结合轮廓显示,实现完整的框选目标(附Demo代码)
原地址:http://dong2008hong.blog.163.com/blog/static/469688272013111554511948/ 在unity里实现,其实很简单,因为有两个前提:1 ...
- jquery 拖拽,框选的一点积累
拖拽draggable,框选 selectable,按ctrl多选,临近辅助对齐,从工具栏拖工具 等,和jqueryui的selectable不同,是在一个父div里框选子div(类似框选文件),一 ...
- 一种在视频OBJECT标签上放置均分四个区域的框选方法
一般在视频区域中做框样式,作应由视频插件自己来实现,但是出于其它一些原因自己琢磨了一个使用HTML标签来实现框选区域的方法,按照行外应该属于笨方法,虽然有点笨,可能在其他方面有借鉴意义,在这里拿出来跟 ...
- ArcGis 中MapControl 框选
void mCtrl_OnMouseDown(object sender, ESRI.ArcGIS.Controls.IMapControlEvents2_OnMouseDownEvent e) ...
- Javascript实现鼠标框选元素后拖拽被框选的元素
之前需要做一个框选元素后拖拽被框选中的元素功能,在网上找资料做了一些修改,基本达到了需要的效果,希望对也需要实现框选后拖拽元素功能的人有用. 页面加载后效果 框选后的内容可以拖拽,如下图: 代码下载
- JavaScript实现框选效果
<html> <head> <title>region</title> <style> body { margin: 0; padding: ...
- js实现鼠标拖动框选元素小狗
方法一: <html> <head></head> <style> body{padding:100px;} .fileDiv{float:left;w ...
- ListView鼠标框选实现蓝色蒙板
此问题留心已久,今日方悉心求之,记录心得. ListView控件,不论Delphi中的TListView还是c#中的ListView,在开启其MultiSelect属性时,鼠标框选只是显示框张,如下图 ...
随机推荐
- 前端js单元测试 使用mocha、chai、sinon,karma
karma(因果报应) 提供在浏览器上测试 可以同时跑在多个浏览器下 mocha测试框架 其他测试框架还有Jasmine chai断言库 expect = chai.expect sinon ...
- LR录制附件上传后,回放报错
使用LR录制附件上传后,点击回放,发现报错:没有找到上传的文件 Could not obtain information about submitted file "C:\Users\Adm ...
- 修改为阿里的yum源
如果没有wget,先安装一个.(如果有请蹦过) yum install wget -y 备份本地yum源 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.r ...
- 多个ssh key 配置多个网址
多个 ssh key 配置多个网站 一.生成ssh key ssh-keygen -t rsa -C "你的邮箱" -f ~/.ssh/id_rsa_one ssh-keygen ...
- bzoj4589-Hard Nim【FWT】
正题 题目链接:https://darkbzoj.tk/problem/4589 题目大意 求有多少个长度为\(n\)的数列满足它们都是不大于\(m\)的质数且异或和为\(0\). 解题思路 两个初始 ...
- CF1137F-Matches Are Not a Child‘s Play【LCT】
正题 题目链接:https://www.luogu.com.cn/problem/CF1137F 题目大意 给出\(n\)个点的一棵树,第\(i\)个点权值为\(i\). 一棵树的删除序列定义为每次删 ...
- P5540-[BalkanOI2011]timeismoney|最小乘积生成树【最小生成树,凸壳】
正题 题目链接:https://www.luogu.com.cn/problem/P5540 题目大意 给出\(n\)个点\(m\)条边边权是一个二元组\((a_i,b_i)\),求出一棵生成树最小化 ...
- Spring系列之Redis的两种集成方式
在工作中,我们用到分布式缓存的时候,第一选择就是Redis,今天介绍一下SpringBoot如何集成Redis的,分别使用Jedis和Spring-data-redis两种方式. 一.使用Jedis方 ...
- 技术与艺术的结合,HMS Core让手机主题趣味丛生
在9月23日晚举办的华为nova9系列新品发布会上,华为在发布nova9系列新机之外,还为观众展示了多款Harmony OS趣味主题.其中一款名为"翻滚吧牛奶"的应用主题看起来十分 ...
- 从零入门 Serverless | SAE 的极致应用部署效率
作者 | 文俊 阿里巴巴云原生团队 本文整理自<Serverless 技术公开课>,"Serverless"公众号后台回复"入门",即可获取系列文章 ...