Cesium切换视角中心点不变

1. 倾斜

2. 回正

实现思路

在改变相机视角前,用相机高度和三角函数计算出一个偏移量,改变中心点的经纬度即可

javascript 复制代码
/**
     * 静态工具:根据俯仰角切换相机视角
     * @param {Cesium.Viewer} viewer Cesium Viewer
     * @param {number} lng   经度
     * @param {number} lat   纬度
     * @param {number} alt   高度(米)
     * @param {number} pitchDeg 俯仰角(角度制,-90 垂直向下)
     */
    static updateCameraByPerspective(viewer, lng, lat, alt, pitchDeg) {
        if (!viewer || typeof pitchDeg !== 'number') return;

        const pitch = Cesium.Math.toRadians(pitchDeg);
        let position = Cesium.Cartesian3.fromDegrees(lng, lat, alt);

        // 非 90° 俯视时修正位置
        const absPitch = Math.abs(pitchDeg);
        if (absPitch < 89) {
            const offset = alt / Math.tan(absPitch * Math.PI / 180);
            const heading = viewer.camera.heading;
            const offsetX = -offset * Math.sin(heading);
            const offsetY = -offset * Math.cos(heading);
            const enu = Cesium.Transforms.eastNorthUpToFixedFrame(position);
            const offsetVec = new Cesium.Cartesian3(offsetX, offsetY, 0);
            position = Cesium.Matrix4.multiplyByPoint(enu, offsetVec, new Cesium.Cartesian3());
        }

        viewer.camera.flyTo({
            destination: position,
            orientation: {
                heading: viewer.camera.heading,
                pitch,
                roll: 0
            }
        });
    }
相关推荐
前端小崔5 天前
Three.js 与 Cesium 融合实战问题汇总
前端·three.js·cesium
洛兮银儿5 天前
前端页面引入cesium
前端·cesium
GISBox8 天前
数字孪生项目必备:RVT模型转3DTiles格式的高效解决方案
gis·cesium·格式转换·服务发布·gisbox·rvt切片·3dtiles格式
ToTacview8 天前
Web 可视化卡顿的归因方法论:以“流畅一段、停顿一下“为例的代码级根治
cesium
夜郎king9 天前
基于天地图 Cesium 三维服务实现三维地球及地球自转实践
数据分析·cesium·3d地图·三维地球
luckystar513~11 天前
Navara是WebGIS的第三条路吗?
gis·cesium·mapbox·地图引擎·地理可视化
灵境(虚幻知音)17 天前
WebGL 不支持>1px的线绘制,那 Cesium 的带宽度的线是怎么画出来的?
webgl·cesium·着色器
ToTacview21 天前
WebGL 没有几何着色器,那 Cesium 的粗线是怎么画出来的?
cesium
用户615958680002223 天前
Cesium 入门系列(四):区域高亮显示的两种实现方案
cesium
用户615958680002223 天前
Cesium 入门(三):BaseLayerPicker 底图切换与国产地图接入
cesium