Cesium开发实战开篇—vite+cesium框架搭建

在Cesium开发基础篇幅中，我们聊过利用Vue cli搭建Vue2.x+Vesium的框架，但这种方式需要在vue.config.js文件中需要配置Cesium在Webpack中的相对路径和别名，用起来不是特别的方便。今天我们采用Vite直接与Cesium集成，无需任务配置，快速搭建基于Vue3.x+Cesium的开发框架。

Vite我们就不详细地进行介绍了，不了解的可进入其官网，这里直接上干货。但需要注意的是，Vite需要Node.js版本14.18+，16+，建议将Node升级成最新版本。Vite提供了众多的模版命令区创建前端工程，鉴于目前市面上Vue工程占主流，本文以Vue项目为例利用Vite和pnpm（安装pnpm请参上官方教程）构建项目。打开cmd命令，在指定的磁盘目录下执行如下命令：
pnpm create vite vite-cesium --template vue
创建和安装依赖包速度非常之快，这也是采用pnpm和vite的主要原因之一。Vite命令创建的工程会自动生成vite.config.js文件，来配置一些相关的参数，Vite和Vue cli的主要差别就是打包方面，通过Vite创建的前端工程采用的是rollup打包，而通过Vue Cli创建的前端工程采用的是Webpack打包，显而易见Vite占有很大优势。

下面我们聊聊Cesium的集成，首先用VS Code打开vite-cesium文件夹，在终端执行pnpm i cesium，和pnpm i vite-plugin-cesium -D，安装成功之后在vite.config.js文件引入如下代码：

import cesium from 'vite-plugin-cesium'; // 引入插件                   
export default () => {
  return {
    plugins: [
      vue(),
      cesium(),
    ],        
  },
};

配置好之后，在加载三维球的组件中添加如下代码以后，执行pnpm run dev，一个全新的三维球就出来了。

import 'cesium/Build/Cesium/Widgets/widgets.css';
import * as Cesium from 'cesium/Build/Cesium';

const viewer = new Cesium.Viewer('sceneViewer', {
    animation: true, // 动画小组件
    baseLayerPicker: false, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
    fullscreenButton: false, // 全屏组件
    vrButton: false, // VR模式
    geocoder: false, // 地理编码（搜索）组件
    homeButton: false, // 首页，点击之后将视图跳转到默认视角
    infoBox: false, // 信息框
    sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
    selectionIndicator: false, // 是否显示选取指示器组件
    timeline: true, // 时间轴
    navigationHelpButton: false, // 帮助提示，如何操作数字地球。
    // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
    navigationInstructionsInitiallyVisible: false,
  })

获取整个工程代码，请访问https://github.com/ls870061011/vite-cesium进行下载。