Vue3+Vite+TS引入cesium

首先实现效果只要是参照了大佬的文章：https://www.cnblogs.com/onsummer/p/17299759.html，写下这篇文章，算作整理一下引入的过程，但是具体的细节就不做过多赘述了。

一、安装cesium依赖

pnpm i [email protected]

我是指定了版本，具体要不要指定大家根据自己的实际情况决定即可。

二、拷贝相关文件

将作左图(node_modules文件夹里的)文件拷贝到右侧目录下：

三、配置Vite，优化打包

3.1安装vite-plugin-externals

pnpm add vite-plugin-externals -D

3.2配置vite-plugin-externals

vite.config.ts:

import { viteExternalsPlugin } from 'vite-plugin-externals'

export default (configEnv: ConfigEnv): UserConfigExport => {
  ...
  /** Vite 插件 */
    plugins: [
  ...
      viteExternalsPlugin({
        cesium: 'Cesium',
      }, {
        disableInServe: true, // 开发模式时不外部化
      }),
    ],
}

3.3安装vite-plugin-insert-html

pnpm i vite-plugin-insert-html

3.4配置vite-plugin-insert-html

vite.config.ts:

import { viteExternalsPlugin } from 'vite-plugin-externals'

export default (configEnv: ConfigEnv): UserConfigExport => {
  ...
  /** Vite 插件 */
    plugins: [
  ...
      // 添加script标签
      insertHtml({
        head: [
          h('script', {
            src: 'libs/cesium/Cesium.js'
          })
        ]
      })
    ],
}

四、建立测试.vue文件

<template>
  <div ref="cesiumContainer" class="center">
  </div>
</template>

<script setup lang="ts">
import * as Cesium from "cesium";
import { onMounted, ref } from 'vue'
import { Viewer } from 'cesium'
import 'cesium/Build/CesiumUnminified/Widgets/widgets.css'
import { shallowRef } from "vue";

// 初始化cesium的容器
const cesiumContainer = ref<HTMLDivElement>();
// 保存viewer
// 这里使用shallowRef的原因可以看看我之前写的Vue2的一篇优化的文章
let viewer = shallowRef<Viewer>();
//@ts-ignore
window.CESIUM_BASE_URL = 'libs/cesium/'
Cesium.Ion.defaultAccessToken =
  "xxx"    // 填写自己的token

onMounted(() => {
  viewer.value = new Viewer(cesiumContainer.value as HTMLElement, {
    // 是否显示信息窗口
    infoBox: false,
    terrainProvider: Cesium.createWorldTerrain(),
    shouldAnimate: false,
    animation: false,
    timeline: false,
  })

  // 隐藏logo
  // @ts-ignore
  viewer.value.cesiumWidget.creditContainer.style.display = "none";

  let layers = viewer.value.scene.imageryLayers;
  // 天地图影像图层
  var blackMarble1 = layers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      url: "http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=xxx 填写自己的天地图token",
    })
  );
  // 添加天地图的国境线图层
  var blackMarble = layers.addImageryProvider(
    new Cesium.UrlTemplateImageryProvider({
      url: "http://t0.tianditu.gov.cn/DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=xxx 填写自己的天地图token",
    })
  );
})
</script>

我这里是用的Vue3的一些模板，所以没有考虑样式，如果是自己写的话，记得给容器添加相应的宽高。