【CesiumJS-1】引入三维地球并初始化

基于vue3+vite的CesiumJS学习与使用

安装Cesium

npm i cesium

前置工作

1. 申请CESIUM ion-token

申请地址

2. 复制cesium依赖包中的Cesium文件

3. 将文件放到根目录下

4. index.html文件引入cesiumJS相关文件

加载三维地球

1. 创建.vue组件并使用组件

2. 创建cesium容器盒子

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

3. 使用cesium引入三维地球

<script setup>
import { onMounted, ref } from "vue";
const viewer = ref(null);

const initCesium = () => {
  // 1.引入token
  Cesium.Ion.defaultAccessToken = "xxxxxxxxxxxxxxx";
  // 2.三维地球初始化
  viewer.value = new Cesium.Viewer("cesiumContainer");
}

onMounted(() => {
  initCesium();
})
</script>

<style scoped>
#cesiumContainer {
  position: relative;
  width: 100vw;
  height: 100vh;
}
</style>

效果展示:

4. 初始化三维地球

  viewer.value = new Cesium.Viewer("cesiumContainer", {
    animation: false, //是否创建动画小器件，左下角仪表
    fullscreenButton: false, //是否显示全屏按钮
    geocoder: false, //是否显示geocoder小器件，右上角查询按钮
    homeButton: false, //是否显示Home按钮
    infoBox: false, //是否显示信息框
    sceneModePicker: false, //是否显示3D/2D选择器
    scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
    selectionIndicator: false, // 是否显示选取指示器组件
    timeline: false, // 是否显示时间轴
    navigationHelpButton: false,// 是否显示右上角的帮助按钮
    baselLayerPicker: false, // 将图层选择的控件关掉，才能添加其他影像数据
    shadows: false, // 是否显示背影
    baseLayerPicker: false, // 是否显示图层选择器
    orderIndependentTranslucency: false, //去掉大气层黑圈
  });

去除文字、图片的锯齿等

  viewer.value.scene.fxaa = false;//改善实体图片清晰度，去除图片锯齿
  viewer.value.scene.postProcessStages.fxaa.enabled = true; //去锯齿 使文字清晰
  if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    // 判断是否支持图像渲染像素化处理
    viewer.value.resolutionScale = window.devicePixelRatio;
  }

去除版权信息

  viewer.value._cesiumWidget._creditContainer.style.display = "none";

修改鼠标左键平移、滚轮缩放、右键旋转视角

  //缩放
  viewer.value.scene.screenSpaceCameraController.zoomEventTypes = [
    Cesium.CameraEventType.WHEEL,
    Cesium.CameraEventType.PINCH,
  ];
  //视图视角切换
  viewer.value.scene.screenSpaceCameraController.tiltEventTypes = [
    Cesium.CameraEventType.PINCH,
    Cesium.CameraEventType.RIGHT_DRAG,
  ];

效果展示

完整代码：

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

<script setup>
import { onMounted, ref } from "vue";
const viewer = ref(null);

const initCesium = () => {
  // 1.引入token
  Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3MjIyNjg2OS01OWY1LTQ0OGQtYjg4Yy0xNmM1ZmFmMzVhYTgiLCJpZCI6MTU4NDUyLCJpYXQiOjE3MDgzMjY1NDB9.PYcGBAkBAwfE4rzabWzOnqmvOwThUHy0nnCzTT0sMGs";
  // 2.三维地球初始化
  viewer.value = new Cesium.Viewer("cesiumContainer", {
    animation: false, //是否创建动画小器件，左下角仪表
    fullscreenButton: false, //是否显示全屏按钮
    geocoder: false, //是否显示geocoder小器件，右上角查询按钮
    homeButton: false, //是否显示Home按钮
    infoBox: false, //是否显示信息框
    sceneModePicker: false, //是否显示3D/2D选择器
    scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
    selectionIndicator: false, // 是否显示选取指示器组件
    timeline: false, // 是否显示时间轴
    navigationHelpButton: false,// 是否显示右上角的帮助按钮
    baselLayerPicker: false, // 将图层选择的控件关掉，才能添加其他影像数据
    shadows: false, // 是否显示背影
    baseLayerPicker: false, // 是否显示图层选择器
    orderIndependentTranslucency: false, //去掉大气层黑圈
  });

  // 去除文字、图片的锯齿等
  viewer.value.scene.fxaa = false;//改善实体图片清晰度，去除图片锯齿
  viewer.value.scene.postProcessStages.fxaa.enabled = true; //去锯齿 使文字清晰
  if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
    // 判断是否支持图像渲染像素化处理
    viewer.value.resolutionScale = window.devicePixelRatio;
  }

  // 去除版权信息
  viewer.value._cesiumWidget._creditContainer.style.display = "none";

  // 修改鼠标左键平移、滚轮缩放、右键旋转视角
  //缩放
  viewer.value.scene.screenSpaceCameraController.zoomEventTypes = [
    Cesium.CameraEventType.WHEEL,
    Cesium.CameraEventType.PINCH,
  ];
  //视图视角切换
  viewer.value.scene.screenSpaceCameraController.tiltEventTypes = [
    Cesium.CameraEventType.PINCH,
    Cesium.CameraEventType.RIGHT_DRAG,
  ];
  
}

onMounted(() => {
  initCesium();
})
</script>

<style scoped>
#cesiumContainer {
  position: relative;
  width: 100vw;
  height: 100vh;
}
</style>