Setting Up the Environment for CesiumJS Migration Project

The GIS function in Wings Engine integrates the complete functions of CesiumJS, and develops a complete interface of CesiumJS to facilitate the rapid migration of previous CesiumJS projects.

1. Add GIS

The Wings Engine GIS template can be added in the following two ways

1.1 Create a new GIS project directly when creating a new one

1.2 Add a GIS base to an existing project

2. Mount CesiumJS code

Select the Code tab and click Add code file.

Save the following code as 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 {
  // Initialize Cesium in the init function
  async init() {
    const { Cesium } = this.element.getMountedInstance();
    console.debug("Cesium Version:", Cesium.VERSION);

    const viewer = new Cesium.Viewer("cesiumContainer");
  }
  // The HTML part of CesiumJS is returned through this function
  getCesiumHtml() {
    return `
    <style>
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
    </style>
    <div id="cesiumContainer"></div>
    `;
  }
}
export default CesiumDemo;

In the code option just added, click and select CesiumDemo.js to upload.

3. Modify the main camera

The main camera in Whale Twin is a bird’s-eye view camera by default. This camera cannot be controlled by CesiumJS code and needs to be changed to a Cesium camera. Double-click the Whale Twin component in the screen (note that it is not double-clicked in the layer panel) to enter the edit mode. Select the scene component and change the main camera in the property panel on the right to a Cesium camera.

4. Restart the project

After saving the project, close the project and reopen it. We can see that the effect of the first project is already there.