Cesium入门基础（一） 项目搭建

一、初始化Vue项目

执行命令，配置vue项目，这里我选择使用vue3+vite+ts

npm init vite@latest

安装完成后依次运行

1. cd cesiumTemplate
2. npm install 
3. npm run dev

复制控制台链接，粘贴到浏览器，显示这个页面即为创建成功

清除Vue模板自带的页面、样式

        App.vue

        style.css

二、 安装依赖 -- Cesium.js

npm i cesium

注：如果有版本要求，可以在npm上找自己需要的版本，链接在这

三、创建Cesium场景容器

1. 在 src/components 下创建 CesiumViewer.vue 文件
2. 创建一个id为 cesiumContainer 的 div 容器
3. 设置cesiumContainer的样式

 四、导入cesium.js并创建

        1. 在public目录下，创建static/cesiumAssets文件夹

        2. 找到以下文件复制到 static/cesiumAssets 文件夹中

node_modules/cesium/Build/Cesium/Workers
node_modules/cesium/Build/Cesium/ThirdParty
node_modules/cesium/Build/Cesium/Assets
node_modules/cesium/Build/Cesium/Widgets

官网上有介绍，这是需要托管的静态资源，如果缺少这一步会导致页面无法正常显示，官网链接 

        3.创建cesium对象

<script setup lang="ts">
import * as Cesium from 'cesium'
import { onMounted } from 'vue'

//引入cesium的css文件
import 'cesium/Build/Cesium/Widgets/widgets.css'

//vue生命周期钩子函数
onMounted(() => {
    //设置cesium的静态资源地址
    (window as any).CESIUM_BASE_URL = 'static/cesiumAssets'

    //创建cesium的viewer对象
    const viewer = new Cesium.Viewer('cesiumContainer')

    //设置相机的初始位置
    viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(116.3974, 39.9093, 10000000)
    })
})
</script>

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

<style scoped>
#cesiumContainer {
    width: 100%;
    height: 100vh;
}
</style>

        4. 在App.vue中使用CesiumViewer组件

<script setup lang="ts">
import CesiumViewer from './components/CesiumViewer.vue'
</script>

<template>
    <CesiumViewer />
</template>

<style scoped></style>

        5. 创建成功

页面中自带了许多cesium的组件，可以通过配置来控制是否显示

const viewer = new Cesium.Viewer('cesiumContainer', {
        infoBox: false, // 是否显示实体信息框（鼠标悬停时显示的信息），默认为true
        timeline: false, // 是否显示时间线小部件，默认为true
        fullscreenButton: false, // 是否显示全屏按钮小部件，默认为true
        baseLayerPicker: false, // 是否显示基础图层选择器小部件，默认为true
        homeButton: false, // 是否显示home按钮（返回初始视图），默认为true
        animation: false, // 是否显示动画控制器小部件，默认为true
        vrButton: false, // 是否显示虚拟现实(VR)模式切换按钮，默认为false
        shouldAnimate: false, // 是否默认开启时钟动画，默认为false
        geocoder: false, // 是否显示地理编码器小部件，默认为true
        sceneModePicker: false, // 是否显示场景模式选择器小部件，默认为true
        selectionIndicator: false, // 是否显示选取指示器小部件，默认为true
        navigationHelpButton: false, // 是否显示导航帮助按钮，默认为true
        navigationInstructionsInitiallyVisible: false, // 是否初始显示导航说明，默认为true
    })