最近的项目中用到了cesium,也了解了一点关于cesium的知识，打点、 标绘、等等基础的功能点，但是在开发过程中使用原生的cesium编写对于初学者还是有点难度，为此，找到关于对cesium进行二次封装的开源项目vue-cesium,本次文章主要记录对vue-cesium的使用方式。

一、如何引入

# npm

$ npm install vue-cesium --save

# yarn

$ yarn add vue-cesium

# pnpm

$ pnpm add vue-cesium

其他方式就不在这里演示了，自行查看官网。

// main.ts
import { createApp } from 'vue'
import VueCesium from 'vue-cesium'
import App from './App.vue'

import 'vue-cesium/dist/index.css'

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

app.mount('#app')

 这里需要注意的是vue-cesium默认配置的cesiumPath:'https://unpkg.com/cesium@latest/Build/Cesium/Cesium.js'

<template>
  <vc-config-provider :cesium-path="vcConfig.cesiumPath">
    <vc-viewer></vc-viewer>
  </vc-config-provider>
</template>
<script setup>
  import { reactive } from 'vue'
  import { VcConfigProvider, VcViewer } from 'vue-cesium'

  const vcConfig = reactive({
    cesiumPath: 'https://unpkg.com/cesium@latest/Build/Cesium/Cesium.js'
  })
</script>

 如果你想用你自己下载的cesium文件地址，可以将他拷贝public文件下并引入。

二、基本用法

        如何绘制面，并保存对应面的数据。

这里主要使用的是VcDrawings这个组件，绘制面的增、删、改、及回显他这里都有对应的方法及api,这里主要是强调一下如何保存绘制的数据。

这里可以通过ref来进行查找，基本的数据是在XXXRef.value.

getDrawingActionInstance("polygon").cmpRef.value

      .renderDatas.value可以获取所有绘制面的数据，getDrawingActionInstances也是同理，唯一不一样的是getDrawingActionInstances的取值方式。