cesium(一)初试cesium

1 跑通Cesium官方Demo

进入 Cesium官网 下载Cesium

解压缩，并用VSCode打开

在终端下载依赖

npm install

运行

npm start

实现本地访问官网 http://localhost:8080/，能看到下面的页面，证明运行成功。
官方demo提供一些离线文档和简单示例

2 自己的项目中安装cesium插件

2.1 创建VUE3项目

必须以管理员身份运行VSCode
创建VUE项目：打开一个文件夹，右键->在集成终端打开->输入语句

vue create [项目名]

VUE项目选择如下
选择自定义

取消代码格式化

选择版本3

选择配置文件存放位置

是否保存该配置

2.2 下载cesium

先进入当前项目目录下

cd .\[项目名]\

然后安装Cesium

npm install cesium

2.3 启动项目

2.3.1 引入资源

引入cesium资源：从cesium-basic/node_modules/cesium/Build/Cesium/找到四个资源(标注红点的四个Assets、ThirdParty、Widgets、Workers)->粘贴到public(cesium-basic/public/)下
复制的位置如下图：

粘贴到的位置如下图：

再将cesium中的Widgets复制到src一份（用于导入css资源使用）

2.3.2 完善代码

完善App.vue中的代码

<template>
  <!-- Cesium视图容器 -->
  <div id="cesiumContainer" ref="cesiumContainer">
  </div>
</template>

<script setup>
import * as Cesium from 'cesium'; // 从node_modules中导入Cesium
import "./Widgets/widgets.css";   // 从src下导入Cesium的样式
import {
    
     onMounted, ref } from 'vue'; // 导入声明周期"挂载"和ref

// 设置Cesium的静态资源路径
window.CESIUM_BASE_URL = "/";

// 创建一个对DOM元素的引用
const cesiumContainer = ref(null);

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    
    animation: false, // 禁用动画小部件
    timeline: false,  // 禁用时间轴
    fullscreenButton: false, // 禁用全屏按钮
    vrButton: false, // 禁用VR按钮
  });
});
</script>

<style>
* {
    
    
  margin: 0;
  padding: 0;
}

#cesiumContainer {
      
      
  width: 100vw;
  /* 使用视口宽度 */
  height: 100vh;
  /* 使用视口高度 */
}
</style>

执行代码（切记，终端要把文件定位到拥有package.json的上一层级）

npm run serve

运行出来后的画面

地球上的信息是cesium提供的，开发人员可以选择不使用，可以使用自己的地图信息

2.3.3 设置token

运行页面底部会提示使用token，我们可以在 Cesium官网注册一个账号并登陆后，粘贴Access Tokens到项目中

Cesium.Ion.defaultAccessToken = '你的token';

2.3.4 隐藏logo

可以选择隐藏页面中的cesium的logo

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    
    infoBox: false,//禁止信息窗口显示
    animation: false, // 禁用动画小部件
    timeline: false,  // 禁用时间轴
    fullscreenButton: false, // 禁用全屏按钮
    vrButton: false, // 禁用VR按钮
  });

  //隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
});

2.3.5 设置默认打开位置

//设置cesium的默认视角(从默认美国改为中国)
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
  89.5,//西边经度
  20.4,//南边纬度
  110.4,//南边经度
  61.2//北边纬度
);

2.4 页面设置

2.4.1导航栏介绍

顶部导航栏介绍

底部导航栏介绍

2.4.2 导航栏隐藏

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    
    infoBox: false,//禁止信息窗口显示
    geocoder: false,//禁止搜索框显示
    homeButton: false,//禁止home按钮显示
    sceneModePicker: false,//禁止切换3D/2D按钮显示
    baseLayerPicker: false,//禁止图层选择器显示
    navigationHelpButton: false,//禁止帮助按钮显示
    animation: false, // 禁用动画小部件
    timeline: false,  // 禁用时间轴
    fullscreenButton: false, // 禁用全屏按钮
    vrButton: false, // 禁用VR按钮
  });

  //隐藏logo
  viewer.cesiumWidget.creditContainer.style.display = "none";
});

2.4.3 天空盒

若想切换背景图片，（切换星空为别的），可以设置天空盒
第一步，添加六张照片资源（必须为正方形）
照片资源：
通过网盘分享的文件：sky
链接: https://pan.baidu.com/s/1EZODJlt8T3o8kJuQRff13g?pwd=exti 提取码: exti

插入位置：

代码引入：

// 组件挂载后执行的代码
onMounted(() => {
    
    
  // 初始化viewer，并将其绑定到ref="cesiumContainer"的div中
  const viewer = new Cesium.Viewer(cesiumContainer.value, {
    
    
    //设置天空盒子
    skyBox: new Cesium.SkyBox({
    
    
      sources: {
    
    
        positiveX: "./texture/sky/px.jpg",
        negativeX: "./texture/sky/nx.jpg",
        positiveY: "./texture/sky/py.jpg",
        negativeY: "./texture/sky/ny.jpg",
        positiveZ: "./texture/sky/pz.jpg",
        negativeZ: "./texture/sky/nz.jpg",
      },
    }),
  });
});

成品效果：