• cesium的鼠标事件(最基础的显示鼠标位置坐标)


    一、cesium屏幕空间事件控制者接口:ScreenSpaceEventHandler(参数canvas)

    #var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);

    创建了一个屏幕控制实例,控制cesium的canvas

    #调用setInputAction,从英文上就能看出这是设置输入行为

    handler.setInputAction(function(x){y},事件类型ScreenSpaceEventType );

    这里注意:移动是movement,移动终点的位置是movement.endPosition;点击是click,点击的位置是click.position

    核心代码如下,上下逻辑就不贴了。

    //鼠标移动的事件
    handler.setInputAction(function(movement){
      //获取鼠标位置,camera.pickEllipsoid()返回一个cartesian类型位置 let click_position
    = viewer.scene.camera.pickEllipsoid(movement.endPosition,my_ellipsoid);
      //位置数据转换只地理数据类型 let carto_position
    = my_ellipsoid.cartesianToCartographic(click_position);   //cesium函数转换至地理数据类型的经纬度
      let longitude_x
    = Cesium.Math.toDegrees(carto_position.longitude); let longitude_y = Cesium.Math.toDegrees(carto_position.latitude); //topDiv是html中的div
      topDiv.innerHTML
    ="点击坐标的位置为"+longitude_x+"经度,"+longitude_y+"纬度"; },Cesium.ScreenSpaceEventType.MOUSE_MOVE)//ScreenSpaceEventType
    
    
    //鼠标左键点击事件
    handler.setInputAction(function(click){
        var click_position =  viewer.camera.pickEllipsoid(click.position,my_ellipsoid);//click换成movement也可实现,但是position不是endposition
        var carto_position = Cesium.Cartographic.fromCartesian(click_position);
        //var carto_position = my_ellipsoid.cartesianToCartographic(click_position);
        var longitude_x = Cesium.Math.toDegrees(carto_position.longitude).toFixed(3);
        var longitude_y = Cesium.Math.toDegrees(carto_position.latitude).toFixed(3);
        topDdv.innerHTML="点击坐标的位置为"+longitude_x+"经度,"+longitude_y+"纬度";},Cesium.ScreenSpaceEventType.LEFT_CLICK)
  • 相关阅读:
    第一章 监控系统入门
    第十八章 Tagging_Redis6.2.1 服务器部署
    第十五章 ACL安全策略
    第十七章 Redis常见管理命令
    第五章 监控系统zabbix快速监控一台主机
    第十九章 Redis6.2.1脚本安装
    第三章 监控系统zabbix4.2官方源安装
    第十六章 Redis6.0其他新功能
    CSS教程:div垂直居中的N种方法
    css 文本两端对齐
  • 原文地址:https://www.cnblogs.com/xiaoguniang0204/p/11740827.html
Copyright © 2020-2023  润新知