cesium与vue的最新技术栈结合的项目搭建介绍(vite篇)

1,044 阅读1分钟

导读

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

step1 新建vite+vue开发环境

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

pnpm create vite
pnpm install

创建我们的项目就好了。

image.png

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占满屏幕,效果为:

image.png

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就不管用了!!

image.png

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

image.png

image.png

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

安装vite-plugin-externals插件

pnpm add vite-plugin-externals -D

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

image.png

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

image.png

完!