CesiumJS迁移项目环境搭建

山海鲸可视化中的鲸孪生组件中的 GIS 功能整合了 CesiumJS 完整的功能，同时开发了 CesiumJS 的完整接口，方便之前 CesiumJS 项目的快速迁移。

1.添加鲸孪生组件

鲸孪生组件的 GIS 的模版可以通过下面两种方式添加进来

1.1 新建时直接新建 GIS 项目

1.2 已有项目中添加 GIS 底座

或者使用 Ctrl+F 搜索孪生后添加：

1.3 在已有鲸孪生场景中添加 GIS

在已有的鲸孪生组件上双击进入编辑状态，在组件栏中找到 GIS 影像，点击添加：

2.挂载 CesiumJS 代码

选择鲸孪生组件（注意不是在鲸孪生的编辑模式中），选择代码选项卡，点击添加代码文件：

保存以下代码为 CesiumDemo.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

class CesiumDemo {
  //在init函数中初始化Cesium
  async init() {
    const { Cesium } = this.element.getMountedInstance();
    console.debug("Cesium Version:", Cesium.VERSION);

    const viewer = new Cesium.Viewer("cesiumContainer");
  }
  //CesiumJS的html部分通过这个函数返回
  getCesiumHtml() {
    return `
    <style>
      #cesiumContainer{
        width:100%;
        height:100%;
        margin:0;
        padding:0;
        overflow:hidden;
      }
    </style>
    <div id="cesiumContainer"></div>
    `;
  }
}
export default CesiumDemo;

在刚刚添加的代码选项中点击选择 CesiumDemo.js 上传。

3.修改主相机

鲸孪生中的主相机默认是鸟瞰相机，这个相机无法受 CesiumJS 代码的控制，需要修改为 Cesium 相机。画面中双击鲸孪生组件（注意不是在图层面板中双击），进入编辑模式。选择场景组件，右侧属性面板中主相机修改为 Cesium 相机。

4.重启项目

Ctrl+s 保存项目后，关闭项目并重新打开。（如果在 SaaS 环境中可以直接 F5 刷新当前网页）。我们可以看到第一个项目的效果已经有了：