返回

Cesium初始化“简明事典”

前端

作为致力于为GIS赋予更强可视化的Cesium,自然也有属于自己的“打开方式”,本次让我们一探究竟。

1. 普通模式初始化

最基础的模式:

// Import the Cesium library
import { Viewer } from "cesium";

// Create a Cesium viewer
const viewer = new Viewer("cesiumContainer");

更多功能的实现与样式的修改(如:关闭logo显示等),则可以设置viewer属性:

// Create a Cesium viewer with custom options
const viewer = new Viewer("cesiumContainer", {
  // Disable the animation loop
  animation: false,

  // Set the initial camera view
  scene3DOnly: true,

  // Use the Google Maps imagery provider
  imageryProvider: new GoogleMapsImageryProvider(),

  // Disable the terrain
  terrainProvider: undefined,

  // Set the background color
  skyBox: new Cesium.SkyBox({
    sources: {
      positiveX: "path/to/positiveX.jpg",
      negativeX: "path/to/negativeX.jpg",
      positiveY: "path/to/positiveY.jpg",
      negativeY: "path/to/negativeY.jpg",
      positiveZ: "path/to/positiveZ.jpg",
      negativeZ: "path/to/negativeZ.jpg",
    },
  }),
});

2. 投影方式初始化

投影方式的选择可以方便开发者的可视化布局和管理,例如:

// Create a Cesium viewer with custom projection
const viewer = new Viewer("cesiumContainer", {
  projectionPicker: true,

  // Set the initial projection
  sceneModePicker: true,
});

3. 动画模式初始化

动画模式是Cesium最为吸引人的地方之一,也是三维可视化的“灵魂”,它的实现也很简单:

// Import the Cesium library
import { Viewer } from "cesium";

// Create a Cesium viewer
const viewer = new Viewer("cesiumContainer", {
  animation: true, // Enable the animation loop
});

// Start the animation loop
viewer.clock.shouldAnimate = true;

4. 快速模式初始化

某些情况下,你需要简化你的脚本,下面的初始化方法可以在适当情况下使用:

// Create a Cesium viewer
const viewer = new Cesium.Viewer("cesiumContainer");

5. 用于 Vue 的 VueCesium 初始化

最后,如果您使用 Vue,则可以使用 VueCesium 来初始化 Cesium Viewer:

<template>
  <div id="cesiumContainer"></div>
</template>

<script>
import { createCesiumComponent } from "vue-cesium";

export default {
  components: {
    CesiumViewer: createCesiumComponent(),
  },

  data() {
    return {
      viewer: null,
    };
  },

  mounted() {
    // Get the Cesium viewer instance
    this.viewer = this.$refs.cesiumViewer.viewer;
  },
};
</script>

无论是使用何种模式进行初始化,都是为了打造一个绝妙的三维可视化世界。接下来,请尽情挥洒您的创意和才华,开启新的篇章吧!