摘要

本文简要介绍了如何使用vue3和vue-cesium实现三维地球表面贴图的可视化

背景

之前使用了controlnet完成了由语义图到卫星图的2d生成任务，并通过tilediffusion插件实现了无缝扩展生成全球的一整块卫星图瓦片。现在试图对这个卫星图进行3d的可视化。

创建vue项目

在vue.js中文官网https://cn.vuejs.org/ 上，目前的创建命令是

bash
npm create vue@latest

输入项目名称后有一堆选项选，我只加了ts，其他的以后有需要再说。

安装vue-cesium组件库

vue-cesium是一个新兴的，将cesium.js包装成Vue3组件库的项目。官网为https://zouyaoji.top/vue-cesium/

安装命令目前为

bash
npm install vue-cesium

创建SPA并导入vue-cesium相关组件，实现可视化

清理成最小运行单元后，src下创建一个Global.vue的SPA，内容如下：

jsx
<script setup>
import { reactive } from 'vue'
import { VcConfigProvider, VcViewer, VcLayerImagery, VcImageryProviderSingletile } from 'vue-cesium'

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

<template>
    <vc-config-provider :cesium-path="vcConfig.cesiumPath">
        <vc-viewer>
            <vc-layer-imagery>
                <vc-imagery-provider-singletile :url=imagePath>

                </vc-imagery-provider-singletile>
            </vc-layer-imagery>
        </vc-viewer>
    </vc-config-provider>
</template>

注意这里的imagePath变量，为了访问方便，我把earth_generated_8ds_nearest_no_black.png这个卫星图放在了public文件夹下，由于打包后public文件夹下的内容会被直接放到根目录下，这样就可以使用./的相对路径访问，在开发环境与生产环境的dist下都可以访问成功。

如果图像放在了src下的目录，比如assets，实测这里用@/assets/xxxxx是不可行的，暂时不清楚是不是组件库的bug还是需要使用更复杂的方式导入图像。

然后修改一下App.vue下的内容。

jsx
<script setup lang="ts">
import Global from './pages/Global.vue'
</script>

<template>
    <Global />
</template>

<style scoped></style>

为了打包后访问js文件路径不出错，还需要在vite.config.ts中加入

ts
export default defineConfig({
    base: './',
})

效果