想法
在开发项目的过程中,因为有时常有控制Cesium.Camera
的镜头的方位角度和位置操作,手动来回修改相机参数很麻烦,为了更加方便的修改场景相机参数信息,以及记录、获取当前相机信息,所以封装了这Camera
组件。
我希望这个组件能满足以下几点需求:
- 通过可视化组件来回拨动相机位置、方位、倾斜角度、翻转角度的变化
- 记录变化后相机信息,以便下次启动后,显示上一次确定记录的镜头
- Gui可视化的操作控件和组件封装一起,通过属性来控制显示、隐藏
- 若明确设置相机(参数)信息,则以该信息为主,不受记录影响
作用
Camera
提供了一种通过 GUI 界面控件操作的形式,用于在 Cesium 场景中控制、记录当前相机信息。
它允许你传入初始化参数设置相机信息,若是没有,也能通过之前操作记录在浏览器 IndexDB 的参数来初始化设置相机信息。
示例
以下展示Camera
组件用法,使用者可以通过 GUI 界面控制操作的形式,修改参数信息,来达到场景镜头的变化。
具体细节,请查看Github仓库。
import "./app.css";
import * as dat from "dat.gui";
import { viewer } from "./main";
import Camera from "./Camera/index";
const gui = new dat.GUI({
name: "Cesium GUI",
width: 450,
autoPlace: true,
closed: false,
});
gui.domElement.id = "gui";
gui.show();
const camera = new Camera(
viewer,
gui,
{
position: {
height: 14241,
longitude: 113.998402,
latitude: 22.356397,
},
headingPitchRoll: {
heading: 14,
pitch: -45,
roll: 0,
},
},
false
);