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
            }
        });
    }
相关推荐
用户43761190302151 天前
让 AI 用自然语言操控三维地球 -- Cesium MCP 开源实践
gis·cesium
李剑一1 天前
数字孪生大屏必看:Cesium 3D 模型选中交互,3 种高亮效果拿来就用!
前端·vue.js·cesium
李剑一2 天前
解决 Cesium 网络卡顿!5 分钟加载天地图,内网也能流畅用,附完整代码
前端·vue.js·cesium
GISBox2 天前
GISBox 2.1.7 版本更新:新增批量矢量导入功能,多项问题修复
gis·cesium·属性表·矢量·gisbox·场景编辑·切片转换
李剑一6 天前
超实用!数字孪生 Cesium 园区 3D 模型加载,一次学会的保姆级教程
前端·vue.js·cesium
李剑一13 天前
拿来就用!Vue3+Cesium 飞入效果封装,3D大屏多场景直接复用
前端·vue.js·cesium
曲折13 天前
Cesium-气象要素PNG色斑图叠加
前端·cesium
GIS开发特训营1 个月前
Cesium Shader 实战:三维 GIS 可视化进阶教程
gis·cesium·gis开发·webgis
GDAL1 个月前
viewer.camera.flyTo 全面教程
cesium·camera·flyto
GIS学姐嘉欣1 个月前
Cesium进阶教程(2)线性高度雾
javascript·cesium·gis开发·webgis