Cesium小组件封装-GUI可视化操作Camera组件

215 阅读1分钟

想法

在开发项目的过程中,因为有时常有控制Cesium.Camera的镜头的方位角度和位置操作,手动来回修改相机参数很麻烦,为了更加方便的修改场景相机参数信息,以及记录、获取当前相机信息,所以封装了这Camera组件。 我希望这个组件能满足以下几点需求:

  • 通过可视化组件来回拨动相机位置、方位、倾斜角度、翻转角度的变化
  • 记录变化后相机信息,以便下次启动后,显示上一次确定记录的镜头
  • Gui可视化的操作控件和组件封装一起,通过属性来控制显示、隐藏
  • 若明确设置相机(参数)信息,则以该信息为主,不受记录影响

1.png

作用

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
);

相关资料