SuperMap iClient3D for WebGL之飞行定位

北京吉普2020

已于 2023-03-23 08:56:54 修改

阅读量494

点赞数

分类专栏： SuperMap iClient WebGL 文章标签： 3d javascript

于 2023-03-20 23:50:32 首次发布

本文链接：https://blog.csdn.net/m290665198/article/details/129678660

版权

SuperMap iClient 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

WebGL

1 篇文章 0 订阅

订阅专栏

文章介绍了如何基于SuperMapiClient3DforCesium实现三维场景的飞行定位功能，详细讨论了Viewer、Camera、Heading、Pitch和Roll等概念，并提供了两种飞行定位的解决方案：视窗飞行定位和相机飞行定位，分别展示了对应的代码示例和效果。

摘要由CSDN通过智能技术生成

一、需求

最近在做一个三维客户端的场景展现，基于SuperMap iClient3D for Cesium实现，其中要使用到飞行定位功能，涉及到视角调整问题，特此记录。

需求描述：基于设备坐标（x，y，z）信息，以指定俯视角度（45°）进行飞行定位。

二、概念扫盲

涉及概念：Viewer、Camera、Heading、Pitch、Roll、Range

Viewer：三维视窗，用于展示三维场景

Camera：相机，用于控制场景的观察视角

Heading：偏航角(弧度) 绕负Z轴旋转，顺时针为正，默认为正北方向0，其中正角向东增加。控制机体头的朝向位置，即左右方向的改变。

Pitch：俯仰角(弧度) 绕负Y轴旋转，顺时针为正，默认为俯视-90。可简单理解成前空翻、后空翻。

Roll：翻滚角(弧度) 绕正x轴旋转，顺时针为正，默认为0。可简单理解成侧空翻。

笛卡尔坐标系：

视角参数：

二、解决方案

飞行需求主要通过定位点及俯仰角实现（Pitch），-45°实现低头俯视，-90为垂直俯视，0°为平视，可根据需求调整角度。

方案①视窗飞行定位

视窗飞行定位代码如下：

    //目标矩形区域（非必须，目标区域参考）
    var rect = viewer.entities.add({
      rectangle: {
        coordinates: Cesium.Rectangle.fromDegrees(110.2,35.6,112.3,36.7),
        material: Cesium.Color.GREEN.withAlpha(1.0),
        height: 10.0,
        outline: false,
      },
    });

    //目标点位（场景飞行，必须基于实体，需要将实体添加到场景）
    var point = viewer.entities.add({
      // fromDegrees（经度，纬度，高度，椭球，结果）从以度为单位的经度和纬度值返回Cartesian3位置
      position: Cesium.Cartesian3.fromDegrees(111.25, 36.15, 10000),
      point: {
        // 点的大小（像素）
        pixelSize: 5,
        // 点位颜色，fromCssColorString 可以直接使用CSS颜色
        color: Cesium.Color.fromCssColorString('#ee0000'),
        // 边框颜色
        outlineColor: Cesium.Color.fromCssColorString('#fff'),
        // 边框宽度(像素)
        outlineWidth: 2
      }
    });

    //相机偏航角，正北为0，绕负z轴旋转，顺正逆反，水平转头
    var heading = Cesium.Math.toRadians(0.0);
    //相机俯仰角，绕负y轴旋转，顺正逆反，默认-90（垂直俯视），前后空翻（抬头，低头）
    var pitch = Cesium.Math.toRadians(-45.0);
    //相机翻滚角，绕正x轴旋转，顺正逆反，默认0，侧空翻（左右歪头）
    var roll = Cesium.Math.toRadians(0);
    //相机距离目标的距离（米），对点有效
    var range = 100000;
    
    //场景飞行控制
    viewer.flyTo(point, {
      offset: new Cesium.HeadingPitchRange(heading, pitch, range),
    });

飞行定位效果如下：

方案②相机飞行定位

相机飞行定位代码如下：

相机的flyTo方法有些问题，飞行后目标点不在当前视窗内，所以改用flyToBoundingSphere方法

    //相机偏航角，正北为0，绕负z轴旋转，顺正逆反，水平转头
    var heading = Cesium.Math.toRadians(0.0);
    //相机俯仰角，绕负y轴旋转，顺正逆反，默认-90（垂直俯视），前后空翻（抬头，低头）
    var pitch = Cesium.Math.toRadians(-45.0);
    //相机翻滚角，绕正x轴旋转，顺正逆反，默认0，侧空翻（左右歪头）
    var roll = Cesium.Math.toRadians(0);
    //相机距离目标的距离（米），对点有效
    var range = 100000;
    
    //设置包围盒 
    var boundingSphere = new Cesium.BoundingSphere(new Cesium.Cartesian3.fromDegrees(111.25, 36.15, 10), 0.0);
    //相机飞行控制 
    viewer.camera.flyToBoundingSphere(boundingSphere, {
        offset: new Cesium.HeadingPitchRange(heading, pitch, range),
    });

flyToBoundingSphere (boundingSphere, options )

将相机移到当前视图包含所提供的包围球的位置。

偏移是在以边界球的中心为中心的局部东-北-上参考系中的航向/俯仰/范围。航向角和俯仰角是在局部的东西向北参考系中定义的。航向是从y轴到x轴的角度。间距是从xy平面开始的旋转。正螺距角度在平面下方。负俯仰角在平面上方。范围是到中心的距离。如果范围是零，则将计算范围以使整个边界球都可见。

在2D和Columbus视图中，必须有一个俯视图。摄像机将被放置在目标上方并向下看。上方的高度目标将是范围。标题将与当地北部对齐。