vue3+cesium+typescript踩坑之路

源码地址

https://github.com/tanghaojie/vue3-cesium-typescript-start-up-template

cesium 对象挂载到全局 window

新建global-cesium.d.ts，文件，文件名随意（以.d.ts结尾就行），然后输入：

/* eslint-disable */
declare namespace globalThis {
  import('cesium')
  import * as Cesium from 'cesium'

  interface Window {
    viewer: Cesium.Viewer
  }
}

即可在 window 上挂载 viewer 对象了，要挂载其他属性，请自行扩展。

vue 全局挂载 cesium 对象

新建cesium-vue.ts文件，写入代码：

import { App } from 'vue'
import * as Cesium from 'cesium'

declare module '@vue/runtime-core' {
  interface CesiumVue {
    viewer: Cesium.Viewer | null
    viewerContainer: HTMLElement | null
  }
  interface ComponentCustomProperties {
    readonly $vc: CesiumVue
  }
}

export default {
  install: function (app: App<Element>): void {
    app.config.globalProperties.$vc = {
      viewer: null,
      viewerContainer: null,
    }
  },
}

在main.ts中：

import cesiumVue from './libs/cesium-vue'

const app = createApp(App)
app.use(cesiumVue)

@vue/runtime-core声明只能写在.ts文件中，至于为什么官方也没说，官方讨论

interface CesiumVue是我自己定义的数据类型，方便后续扩展更多的属性上去，然后就可以全局通过this.$vc进行访问了。比之前 vue2 的时候，挂载到根组件上的方式更灵活更好。

重要提醒： 记得在合适的运行时初始化$vc中的viewer，否则他就一直都是null。
重要提醒： $vc是readonly属性，所以记得永远不要再次初始化$vc。当然，严格模式的 ts 会在二次赋值时提醒你，但就怕用的非严格模式。

vue 的 ref 数据类型

如果在普通的 DOM 元素上使用，数据类型为：HTMLElement；如果用在子组件上，数据类型为：ComponentPublicInstance。

---

版权声明：
除非注明，本博文章均为原创，转载请以链接形式标明本文地址。

---