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进行下载。

你可能感兴趣的:(Cesium开发实战开篇—vite+cesium框架搭建)