《Cesium 进阶知识点》- 监听相机变化事件：获取视高、级别和角度等场景信息

AvatarGiser

已于 2022-10-11 11:32:19 修改

阅读量2.9k

点赞数 1

分类专栏： Cesium 进阶知识点文章标签： cesium camera

于 2022-10-08 13:02:22 首次发布

本文链接：https://blog.youkuaiyun.com/sinat_31213021/article/details/127206710

版权

Cesium 进阶知识点专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何使用Cesium监听相机的视高、方位角、俯仰角和翻滚角等参数变化，并展示如何根据视高的不同实现球体的渐变透明效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

关键代码

使用对象 Camera 监听鼠标 changed事件。

viewer.camera.changed.addEventListener(()=>{
    // 视高 km
    let alt = (viewer.camera.positionCartographic.height / 1000).toFixed(2);
    // 方位角
    let heading = Cesium.Math.toDegrees(viewer.camera.heading).toFixed(2);
    // 俯仰角
    let pitch = Cesium.Math.toDegrees(viewer.camera.pitch).toFixed(2);
    // 翻滚角
    let roll = Cesium.Math.toDegrees(viewer.camera.roll).toFixed(2);
    // 级别
    let level = 0;
    let tileRender = viewer.scene._globe._surface._tilesToRender;
    if (tileRender && tileRender.length > 0) {
        level = viewer.scene._globe._surface._tilesToRender[0]._level;
    }
    let str = `级数：${level} 视高：${alt}km  方位角：${heading}° 俯仰角：${pitch}° 翻滚角：${roll}°`;
    console.log(str);
});

延伸知识

通过视高对球做渐变透明效果，使用接口 Cesium.NearFarScalar

// 视高在 400 - 200 km之间，球有一个渐变的透明效果
viewer.scene.globe.translucency.frontFaceAlphaByDistance = new Cesium.NearFarScalar(
    400 * 1000,// 最小距离，单位是 m
    0.0,     // 透明度 为 0
    200 * 1000,// 最大距离
    1.0,     // 透明度 为 1
);