导读
这段时间入门了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的提示又有了!
完!