Cesium开发基础获——取鼠标点击的经纬度（lon、lat）、高度（height）、相机的视角（heading、pitch、roll）

Henrik698

已于 2022-04-14 16:43:47 修改

阅读量2.6k

点赞数 1

分类专栏： Cesium开发基础文章标签： javascript

于 2022-04-14 16:35:44 首次发布

本文链接：https://blog.csdn.net/m0_37755995/article/details/124175499

版权

Cesium开发基础专栏收录该内容

4 篇文章 6 订阅

订阅专栏

Cesium开发基础获——取鼠标点击的经纬度（lon、lat）、高度（height）、相机的视角（heading、pitch、roll）

cesium提供了三种方式，可以对camera进行操作，这三种方式，有三个共同的参数，heading，pitch，roll；
Roll 是围绕X轴旋转；
Pitch 是围绕Y轴旋转；
Heading 是围绕Z轴旋转；
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Hello World!</title>
    <script src="../Build/Cesium/Cesium.js"></script>
    <style>
      @import url(../Build/Cesium/Widgets/widgets.css);
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      const viewer = new Cesium.Viewer("cesiumContainer",{
    animation:false, //动画插件
    baseLayerPicker:false,
    geocoder:false,
    navigationHelpButton:false,
    timeline:false,
    fullscreenButton:false,
    homeButton:false,
    infoBox:true,
    scene3DOnly:true,//仅仅显示3d,可隐藏右上角2d和3d按钮
    selectionoIndicatr:false,
    navigationInstructionsInitiallyVisibl:false,
    useDefaultRenderLoop:true,
    showRenderLoopErrors:true,
    projectionPicker:false,//投影选择器
    vrButton:false
});


// Load the NYC buildings tileset
// const tileset = new Cesium.Cesium3DTileset({
//   url: '../Test/40866/tileset.json',
// });
// viewer.scene.primitives.add(tileset);
// viewer.zoomTo(tileset)

// Cartesian3 {x: 1216381.3619795016, y: -4736633.564030139, z: 4081253.955153647}
//viewer.camera.pitch:-0.5000534963133889
//viewer.camera.roll:6.283185307179586
// viewer.camera.heading:6.283185307179586

//Cesium获取鼠标点击的经纬度（lon、lat）、高度（height）、相机的视角（heading、pitch、roll）
var canvas = viewer.scene.canvas;
var handler = new Cesium.ScreenSpaceEventHandler(canvas);
handler.setInputAction(function(lclickment) {
    var scene = viewer.scene;
    var ellipsoid = scene.globe.ellipsoid;
    //var cartesian = LoadCesium.Viewer.camera.pickEllipsoid(lclickment.position, ellipsoid);
    var cartesian = viewer.scene.pickPosition(lclickment.position);
    positionPick = cartesian;
    var pinBuilder = new Cesium.PinBuilder();
    if (cartesian) {
        var cartographic = ellipsoid.cartesianToCartographic(cartesian);
        lon = Cesium.Math.toDegrees(cartographic.longitude).toFixed(7);
        lat = Cesium.Math.toDegrees(cartographic.latitude).toFixed(7);
        //地理高度
        //height = (cartographic.height+1).toFixed(2);
        //相机高度
        height=viewer.camera.positionCartographic.height.toFixed(0);
        //方向   围绕Z轴旋转
        heading = Cesium.Math.toDegrees(viewer.camera.heading).toFixed(2);
        //倾斜角度   围绕Y轴旋转
        pitch = Cesium.Math.toDegrees(viewer.camera.pitch).toFixed(2);
        //围绕X轴旋转
        roll = Cesium.Math.toDegrees(viewer.camera.roll).toFixed(2);
        console.log('lon:'+lon+";"+'lat:'+lat+";"+ 'height:'+height);
        console.log('heading:'+heading+';'+'pitch:'+pitch + ';'+'roll:' + roll)
      }
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);


    </script>
  </body>
</html>

Henrik698

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Cesium开发基础获——取鼠标点击的经纬度（lon、lat）、高度（height）、相机的视角（heading、pitch、roll）

Cesium开发基础——获取鼠标点击的经纬度（lon、lat）、高度（height）、相机的视角（heading、pitch、roll）
复制链接

扫一扫