返回
Cesium初始化“简明事典”
前端
2023-10-25 05:12:58
作为致力于为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>
无论是使用何种模式进行初始化,都是为了打造一个绝妙的三维可视化世界。接下来,请尽情挥洒您的创意和才华,开启新的篇章吧!