Vite2+Cesium的集成

Vite和Cesium

Vite是vue作者尤雨溪在开发vue3.0时开发的一个基于原生ES-Module的前端构建工具，其本人灾后来对vue3的宣传中对自己的新作品Vite赞不绝口。从速度上来说，vite确实比webpack要快，这也是webpack本身热更新的一个缺陷，现在很多公司也开始上手使用vite2.0进行项目开发，具体vite2和webpack的区别可以在以后的文章介绍。

Cesium 是一款面向三维地球和地图的，世界级的JavaScript开源产品。它提供了基于JavaScript语言的开发包，方便用户快速搭建一款零插件的虚拟地球Web应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证。

两者的结合毫无疑问会加速数字化城市，智慧城市的分析，也更方便用户直观的了解城市的结构以及将一些看不到的数据的可视化展示。

Vite2集成Cesium

1.创建一个项目

使用NPM

npm init @vitejs/app

使用Yarn

yarn create @vitejs/app

按照提示操作即可

或者可以直接通过命令行添加附加命令，完成模板的创建

# npm 6.x
npm init @vitejs/app my-vue-app --template vue

# npm 7+, 需要额外的双横线：
npm init @vitejs/app my-vue-app -- --template vue

# yarn
yarn create @vitejs/app my-vue-app --template vue

2.集成Cesium

通过npm或者yarn的方式安装cesium

npm i cesium vite-plugin-cesium vite -D
# yarn add cesium vite-plugin-cesium vite -D

安装好以后，需要在vite.config.js中配置cesium 的启动

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from 'vite-plugin-cesium';
export default defineConfig({
  plugins: [vue(), cesium()]
});

3.引入Cesium

有两种引入方式，一种是按需引入，一种是全局引入，根据自己的需要灵活选择

//按需
import { Viewer } from 'cesium';
import './css/main.css';

const viewer = new Viewer('cesiumContainer');

//全局
import * as Cesium from 'cesium';
const viewer = new Cesium.Viewer('cesiumContainer');

4.挂载

这里直接把Cesium代码写到App.vue即可，但需要注意的是，Viewer需要在页面渲染完的时候挂载，所以需要使用OnMounted，代码如下

<script setup>
  import * as Cesium from 'cesium';
  import { onMounted } from 'vue';
  onMounted(() => {
    const viewer = new Cesium.Viewer('cesiumContainer');
  });
</script>

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

<style>
  html,body,#cesiumContainer{
    width:100%;
    height:100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
</style>

关于更多Vue，Cesium以及其他前端知识会不断更新，有错误欢迎指出，谢谢~