编辑
2024-04-14
开发
00
请注意,本文编写于 98 天前,最后修改于 98 天前,其中某些信息可能已经过时。

目录

摘要
背景
创建vue项目
安装vue-cesium组件库
创建SPA并导入vue-cesium相关组件,实现可视化
效果

摘要

本文简要介绍了如何使用vue3vue-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.vueSPA,内容如下:

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: './', })

效果

CleanShot 2024-04-14 at 19.59.32.jpg

CleanShot 2024-04-14 at 20.00.02.jpg

本文作者:insomnia

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!