导读

这段时间入门了cesium.js这一强大的gis开发框架，然而其又臭又长难以记忆的对象和方法名在纯JS的开发环境着实让人些许烦躁。由于本人原来就主要专攻vue开发，就想着将其和vue以及vite结合一起，搭配上我们强大的ts，不就省事多了嘛。说干就干，具体的操作如下：

step1 新建vite+vue开发环境

这一步我们还是快速略过,具体过程就是：

pnpm create vite
pnpm install

创建我们的项目就好了。

step2 引入cesium依赖以及插件

pnpm add cesium
pnpm add vite-plugin-cesium -D

在App.vue中代码改为：

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

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

const containerRef = ref();
onMounted(() => {
  let viewer = new Cesium.Viewer(containerRef.value);
});
</script>

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

在main.ts中记得引入widgets.css文件

import "cesium/Build/Cesium/Widgets/widgets.css";

然后在vite.config.ts文件中使用插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cesium from "vite-plugin-cesium"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),cesium()],
})

修改样式，让container这个div占满屏幕，效果为：

step3 非npm方式引入cesium

然而实际上，我所参与的项目使用的cesium以及是二次开发了的，那么我们就不可能再通过npm来安装我们的cesium,我们通常会直接在index.html引入（示例中我采取了CDN的方式）。

<script src="https://unpkg.com/cesium@1.103.0/Build/Cesium/Cesium.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/cesium@1.103.0/Build/Cesium/Widgets/widgets.css"/>

（记得移除vite cesium插件！！） 这时的你会发现我们的ts就不管用了！！

这时，我们需要把npm的Cesium.d.ts放在全局

接着移除原有的npm包后，将找不到cesium这个包了，这时我们应该指定我们这个包是externals导入的，不需要从node_modules寻找！

安装vite-plugin-externals插件

pnpm add vite-plugin-externals -D

指定cesium将从外部导入，其全局变量为Cesium。

这时再来到我们的App.vue，ts的提示又有了！

完！