[cesium] 事件和地图坐标转换

布满荆棘的人生 2021-12-10 11:29 526阅读 1赞

### cesium事件 ###

cesium提供的鼠标监听接口,接口提供setInputAction接口对监听事件属性

var viewer = new Cesium.Viewer('cesiumContainer');
    
    
    1.相机事件（移动开始、移动结束等等）
    viewer.scene.camera.moveEnd.addEventListener(function(){
    
    })；
    2.鼠标事件（单击、移动、右键等）
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
    handler.setInputAction(function (movement) {
    
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    3.渲染事件(实时渲染，很关键的一个事件)
    var renderEnd = viewer.scene.postRender.addEventListener(function(){
    
    
    });
    
    //鼠标事件
    //1、左键单击事件
    
    handler.setInputAction(function(click){
        console.log('左键单击事件：',click.position);     
    },Cesium.ScreenSpaceEventType.LEFT_CLICK);
    
    
    //2、左键双击事件
    
    handler.setInputAction(function(click){
        console.log('左键双击事件：',click.position);     
    },Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    
    
    //3、左键按下事件
    
    handler.setInputAction(function(click){
        console.log('左键按下事件：',click.position);     
    },Cesium.ScreenSpaceEventType.LEFT_DOWN);
    
    
    //4、左键弹起事件
    
    handler.setInputAction(function(click){
        console.log('左键弹起事件：',click.position);     
    },Cesium.ScreenSpaceEventType.LEFT_UP);
    
    
    //5、中键单击事件
    
    handler.setInputAction(function(click){
          console.log('中键单击事件：',click.position);     
     },Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
    
    
    //6、中键按下事件
    
    handler.setInputAction(function(click){
          console.log('中键按下事件：',click.position);     
    },Cesium.ScreenSpaceEventType.MIDDLE_DOWN);
    
    
    //7、中键弹起事件
    
    handler.setInputAction(function(click){
        console.log('中键弹起事件：',click.position);     
    },Cesium.ScreenSpaceEventType.MIDDLE_UP);
    
    
    //8、移动事件
    
    handler.setInputAction(function(movement){
        console.log('移动事件：',movement.endPosition);     
    },Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    
    
    //9、右键单击事件
    
    handler.setInputAction(function(click){
        console.log('右键单击事件',click.position);     
    },Cesium.ScreenSpaceEventType.RIGHT_CLICK);
    
    
    //10、右键按下事件
    
    handler.setInputAction(function(click){
        console.log('右键按下事件',click.position);     
    },Cesium.ScreenSpaceEventType.RIGHT_DOWN);
    
    
    //11、右键弹起事件
    
    handler.setInputAction(function(click){
        console.log('右键弹起事件',click.position);     
    },Cesium.ScreenSpaceEventType.RIGHT_UP);
    
    
    //12、滚轮事件
    
    handler.setInputAction(function(wheelment){
        console.log('滚轮事件：',wheelment);     
    },Cesium.ScreenSpaceEventType.WHEEL);
    
    
    //删除事件
    
    handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);

### cesium 坐标转换  ###

//坐标转换
    
    Pick----屏幕坐标   Cartesian----世界坐标  cartographic-----地理坐标（弧度）
    Point----经纬度坐标
    1.屏幕坐标转世界坐标
    var pick= new Cesium.Cartesian2(window.innerWidth,window.innerHeight);
    var cartesian = scene.globe.pick(viewer.camera.getPickRay(pick), scene);
    注：一共是两步
    (在2D下上述方法不适用，改成：
    var pick= new Cesium.Cartesian2(0,0);
    var cartesian = viewer.camera.pickEllipsoid(pick, viewer.scene.globe.ellipsoid);
    )
    
    2.世界坐标转地理坐标（弧度）
    var cartographic = scene.globe.ellipsoid.cartesianToCartographic(cartesian);
    或
    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
    3.世界坐标转屏幕坐标
    var pick = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, cartesian);
    4.地理坐标（弧度）转经纬度坐标
    var point=[ cartographic.longitude / Math.PI * 180, cartographic.latitude / Math.PI * 180];
    5.地理坐标（弧度）转世界坐标
    var  cartesian = scene.globe.ellipsoid. cartographicTo Cartesian (cartographic);
    6.经纬度坐标转地理坐标（弧度）
    var cartographic = Cesium.Cartographic.fromDegree(point);
    7.经纬度坐标转世界坐标
    var  cartesian  =  Cesium. Cartesian 3.fromDegree(point);

发表评论取消回复

表情：

评论列表（有 0 条评论，526人围观）

还没有评论，来说两句吧...

相关阅读

相关 cesium学习——cesium中的坐标

一、坐标展现形式　　在cesium中，对于坐标数值单位有三种：角度、弧度和坐标值　　1.角度　　　　角度就是我们所熟悉的经纬度，对于地球的坐标建立如下：　　　　

r囧r小猫/ 2023年08月17日 17:24/ 0 赞/ 185 阅读

相关 Cesium的屏幕坐标、世界坐标、WGS84坐标

Cesium的坐标系 Cesium中常用的坐标系主要有两种：WGS84坐标系和笛卡尔空间直角坐标系。平时我们常见的某个点的经纬度就是在WGS84坐标系下某个点的坐标，它的

男娘i/ 2023年06月12日 08:42/ 0 赞/ 32 阅读

相关微信地图wgs84坐标，gcj02坐标，bd09坐标转换

微信小程序三种常见经纬度坐标系的转化遇见问题：在其它端点位显示正常，在小程序上点位发生偏移，微信小程序是gcj02坐标，就是xxToGcj02，具体情况具体分析我们

Dear 丶/ 2023年01月06日 05:48/ 0 赞/ 66 阅读

相关地图坐标转换

/\\ \ 坐标转换，百度地图坐标转换成腾讯地图坐标 \ lng 腾讯经度（pointy） \ lat 腾讯纬度（pointx） \ 经度>纬度 \/

青旅半醒/ 2022年09月15日 11:56/ 0 赞/ 347 阅读

相关百度地图API 批量坐标转换

在将原始坐标批量转换的时候，回调的时候发现 data.status = 25 translateCallback = function (data){

我就是我/ 2022年08月19日 01:41/ 0 赞/ 512 阅读

相关地图坐标转换 -- 火星坐标与GPS坐标

第一次处理地理位置的数据的人，没什么经验，往往掉入很多坑浪费不少时间。我也是刚刚从坑里爬出来。这篇博文主要是把入门GPS轨迹分析的经验总结一下，以方便大家少走些弯路。（1）

向右看齐/ 2022年07月14日 23:21/ 0 赞/ 325 阅读

相关地图坐标转换 -- 火星坐标与GPS坐标

第一次处理地理位置的数据的人，没什么经验，往往掉入很多坑浪费不少时间。我也是刚刚从坑里爬出来。这篇博文主要是把入门GPS轨迹分析的经验总结一下，以方便大家少走些弯路。（1）

不念不忘少年蓝@/ 2022年07月14日 23:00/ 0 赞/ 562 阅读

相关腾讯地图转换成百度地图坐标

/ 坐标转换，腾讯地图转换成百度地图坐标 @param lat 腾讯纬度 @param lon 腾讯经度 @return 返回结果：经度,纬度 /

古城微笑少年丶/ 2022年06月08日 21:18/ 0 赞/ 711 阅读

相关地图坐标转换(javascript源码)

与百度地图的坐标转换API相比较，偏移如下图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly

秒速五厘米/ 2022年04月11日 03:16/ 0 赞/ 276 阅读

相关 [cesium] 事件和地图坐标转换

cesium事件 cesium提供的鼠标监听接口,接口提供setInputAction接口对监听事件属性 var viewer = new Cesium.Vie

布满荆棘的人生/ 2021年12月10日 11:29/ 1 赞/ 527 阅读