cesium倾斜摄影

cesium倾斜摄影

倾斜摄影在Cesium上的相关应用。

加载与定位

const tileset = new Cesium.Cesium3DTileset({
    url: '/public/dayanta/tileset.json',
});
viewer.scene.primitives.add(tileset);   // 加载
viewer.zoomTo(tileset); // 定位

位置调整（先调整后加载）

功能需求：在倾斜摄影加载到Cesium场景之前，更改其位置、高度、旋转等。
实现思路：主要就是在添加Cesium3DTileset之后，不要直接加载；先在tileset.readyPromise.then的回调函数中对倾斜摄影的位置信息进行处理之后再将其加载到Cesium场景中，具体实现详见如下代码。

const tileset = new Cesium.Cesium3DTileset({
    url: '/public/dayanta/tileset.json',
});
tileset.readyPromise.then((tileset) => {
    console.log('tileset', tileset);
    console.log('tileset默认位置', tileset.boundingSphere.center);
    const params = {
        tx: 120.72558333333333 - 0.00420,
        ty: 31.043325 + 0.00159,
        tz: 200, // 修改高程
        rx: 30,
        ry: 0,
        rz: -65 // 修改旋转
    };
    const update3dtilesMaxtrix = (tileset: Cesium.Cesium3DTileset, params: any) => {
        // 旋转
        const mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
        const my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
        const mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
        const rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
        const rotationY = Cesium.Matrix4.fromRotationTranslation(my);
        const rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
        // 平移（修改经纬度）
        const position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
        const m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
        // 旋转、平移矩阵相乘
        Cesium.Matrix4.multiply(m, rotationX, m);
        Cesium.Matrix4.multiply(m, rotationY, m);
        Cesium.Matrix4.multiply(m, rotationZ, m);
        // 缩放（修改缩放比例）
        const scale = Cesium.Matrix4.fromUniformScale(0.95);
        Cesium.Matrix4.multiply(m, scale, m);
        // 赋值给tileset
        (tileset as any)._root.transform = m;
    }
    update3dtilesMaxtrix(tileset, params);
    viewer.scene.primitives.add(tileset);   // 加载
    console.log('tileset更改后的位置', tileset.boundingSphere.center);
    viewer.zoomTo(tileset); // 定位
})

倾斜摄影的旋转角度已被调整，符合预期效果。

位置调整（先加载后调整）

功能需求：更改已加载到Cesium场景中的倾斜摄影的高度（下面例子打算将倾斜摄影的高度提升500米）。
实现思路：计算好要更改的高度的值并进行赋值，然后对已加载的倾斜摄影的位置信息进行更新，具体实现详见如下代码。

const tileset = new Cesium.Cesium3DTileset({
    url: '/public/dayanta/tileset.json',
});
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset);
tileset.readyPromise.then((tileset) => {
    // 获取3Dtlies的bounds范围
    const boundingSphere = tileset.boundingSphere;
    // 获取3Dtlies的范围中心点的弧度
    const cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
    console.log('cartographic------1', cartographic);
    setTimeout(() => {
        const heightOffset = 500; // 要改变的高度
        // 倾斜摄影本身的位置
        const surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
        // 倾斜摄影高度改变的位置
        const offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height + heightOffset);
        // 定义倾斜摄影的改变状态
        const translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
        // 修改倾斜摄影的位置
        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        viewer.zoomTo(tileset);

        // 获取改变高度后的3Dtlies的bounds范围
        const boundingSphereNew = tileset.boundingSphere;
        // 获取改变高度后的3Dtlies的范围中心点的弧度
        const cartographicNew = Cesium.Cartographic.fromCartesian(boundingSphereNew.center);
        console.log('cartographic------2', cartographicNew);
    }, 15000)
});

未更改高度的倾斜摄影的高度约为430米。更改高度后的倾斜摄影的高度约为930米，两个高度的距离正好是我们更改的高度：500米，符合预期效果。