【WebGis开发 - Cesium】三维可视化项目教程---视点管理
引言
本教程主要是围绕Cesium这一开源三维框架开展的可视化项目教程。总结一下相关从业经验，如果有什么疑问或更好的见解，欢迎评论、私聊探讨，共同进步。
本篇主要讨论如何完成视点管理功能。视点（有的地方也叫收藏点）信息存储了特定视角的相机数据，可以将镜头移动至最佳视角观察三维场景。通常会有以下应用场景：
- 三维场景的初始化视角，通常情况下三维可视化项目都是针对一个园区、片区、城市等多种范围而立项的。所以针对这些范围设置并保存一个最佳视角是非常重要的。
- POI点保存视点信息，在一个范围内可能有多个亮点项目或独特建筑，设置POI点时绑定视点信息，通过点选POI点将镜头移动至最佳观察点。
- 纯收藏功能，把一些项目好看的角度都保存下来并截图，提供汇报工作时演示。
一、基础功能探索
1. 镜头视角获取
在初始化Cesium场景后，通常会设置全局变量 viewer。我们通过 viewer.camera 来获取镜头信息。主要获取 position 、heading 、pitch 、roll 这四个属性：
- position，笛卡尔坐标系下的相机位置坐标。
- heading，表示左右摇头。
- pitch，表示上下点头。
- roll，表示左右歪头。一般情况下，为了减少用户眩晕感，将roll值默认为0。
{
position:{
"x": -2392730.83864336,
"y": 5412946.353618708,
"z": 2439801.3235747567
},
heading: 6.283185307179586,
pitch: -1.5695637657002988,
roll: 0,
// 其他信息
}
2. 镜头视角移动
这里使用 viewer.camera 的 flyTo 方法，控制视角移动至特定视角。
主要使用到两个参数：
- destination，接收一个笛卡尔坐标系的x、y、z三参数对象。表示镜头目标坐标点。
- orientation，偏航角（heading）、俯仰角（pitch）和倾斜角（roll）属性的对象，或包含方向（direction ）和向上（up）属性的对象。一般使用前者。
- 其他属性通过查阅cesium api示例研究。
viewer.camera.flyTo({
destination: {
x: -2392668.884812449,
y: 5404950.676815235,
z: 2436590.0523108398,
},
orientation: {
heading: 6.283185307179586,
pitch: -1.5695637656997583,
roll: 0,
},
});
至此你已经可以获取镜头数据以及控制镜头移动了。
二、进一步封装代码
先理清楚使用场景，需要一个获取视角的方法，一个设置视角的方法，最好可以告诉用户视角移动完成。
1. 封装hooks函数
解释下封装函数的内容
- 设置
currentView变量 ，用作响应式的赋值当前选中视点信息。 - 设置
isFlying变量，用于给定视角移动的标识。利用这一标识，可以规避一些误操作。 getView函数，获取当前视角的镜头信息。只保留需要的部分，并返回字符串形式数据，用于业务存储数据。setView函数，设置视角，返回promise对象。使用链式调用或者await，可以更方便的获得移动完成的时间点，方便进行下一步操作。同时支持自定义移动周期以及运动的缓动函数。- 其他参数在后续的深入研究后，结合业务场景判断是否需要集成到当前hooks函数中。
在 src/hooks 目录下添加 useViewManager.js 文件
import { ref } from "vue";
export const useViewManager = () => {
// 当前获取的视点信息
const currentView = ref(null);
// 是否在视角移动过程中
const isFlying = ref(false);
/**
* @description: 获取当前视点信息
* @return { string } 返回当前视点信息，使用JSON.stringify转换为字符串
*/
const getView = () => {
const cameraData = viewer.camera;
currentView.value = JSON.stringify({
destination: cameraData.position.clone(),
orientation: {
heading: cameraData.heading,
pitch: cameraData.pitch,
roll: cameraData.roll,
},
});
return currentView.value;
};
/**
* @description: 设置视角
* @param {*} view 视点信息，由getView方法获取的字符串
* @param {*} duration 移动时间
* @param {*} easingFunction 缓动函数
* @return {*}
*/
const setView = (view, duration = 1.5, easingFunction) => {
return new Promise((resolve, reject) => {
isFlying.value = true;
const cameraData = JSON.parse(view);
viewer.camera.flyTo({
...cameraData,
duration,
complete: () => {
isFlying.value = false;
resolve(true);
},
cancel: () => {
isFlying.value = false;
reject(false);
},
// 缓动函数枚举值参考链接： https://cesium.com/learn/cesiumjs/ref-doc/EasingFunction.html?classFilter=EasingFunction
// 你也可以自己编写缓动函数，注意函数返回值在[0,1]区间内即可。
easingFunction: easingFunction || Cesium.EasingFunction.LINEAR_NONE,
});
});
};
return {
currentView,
isFlying,
getView,
setView,
};
};
2. 看下效果
3. 如何使用该hooks函数
以下为最基础的使用方式，通过两个点击按钮去获取、设置视角。在业务中注意结合数据存储、获取等操作，灵活使用。
<script setup>
import { useViewManager } from "@/hooks/useViewManager.js";
const { getView, setView, currentView, isFlying } = useViewManager();
let viewData = "";
// 获取视角点击事件
const getCamera = () => {
viewData = getView();
};
// 设置视角点击事件
const setCamera = () => {
setView(viewData , 2).then((res) => {
console.log("fly complete ", res);
// 执行其他操作
});
};
// 设置视角点击事件（同步）
const setCameraSync = async () => {
await setView(viewData , 2);
console.log("fly complete ");
// 执行其他操作
};
</script>
三、总结
本篇主要介绍了如何利用 viewer.camera 和 flyTo 完成了视点管理模块必备功能的hooks函数封装。完整的视点管理还需结合后台数据存储，业务数据绑定等等复杂逻辑，这就需要你自行判断如何将本篇的hooks函数应用到业务中去。
视点管理或是视角控制，是三维可视化项目中的重点功能。这个功能优化好了，可以让项目操作起来更加丝滑令人舒适。有一些可以探索优化的点：
- 飞行路径的修正，目前是由cesium框架默认计算的飞行路径，没有进行人为干预，可以尝试
maximumHeight、pitchAdjustHeight、flyOverLongitude、flyOverLongitudeWeight这几个参数去优化路径。 - 飞行缓动效果优化，通过尝试
easingFunction自行编写缓动函数，优化飞行速度。 - 感兴趣可以一起讨论研究下。
再接再厉~
原文地址：https://blog.csdn.net/weixin_44666711/article/details/142712152
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！