当前位置：首页 > news >正文

vue3 + mars3D 三分钟画一个地球

news 2025/10/20 10:13:26

mars3D开发文档：

http://mars3d.cn/docs/http://mars3d.cn/docs/

Vue组件中：

<script setup lang="ts">
import * as mars3d from "mars3d"
import { onMounted} from "vue"
let map: mars3d.Map;
onMounted(() => {map = new mars3d.Map("key", {basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }]
})
});</script><template><div id="key" class="mars3d-container"></div></template><style scoped></style>

package.json：

//已经省去无关代码
"dependencies": {//已经省去无关代码"mars3d": "^3.10.6","mars3d-cesium": "^1.134.0","mars3d-space": "^3.10.6","vite-plugin-mars3d": "^4.2.2",},//已经省去无关代码

vite.config.ts：

import { mars3dPlugin } from "vite-plugin-mars3d"//已经省去无关代码plugins: [//已经省去无关部分mars3dPlugin(),],//已经省去无关代码

运行

pnpm i

pnpm run dev

效果图：

常见问题：

TypeError: Failed to execute 'createImageBitmap' on 'Window': The provided value is not of type '(Blob or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or ImageData or OffscreenCanvas or SVGImageElement or VideoFrame)'.

原因：当前开发阶段，后端暂无法提供服务，前端开发引入mockjs模拟后端接口响应数据。mockjs原生代码影响了cesium加载地图，

InvalidStateError: The source image could not be decoded.

原因：没有引入ars3d插件

解决：

在vite配置文件中加入mars3dPlugin()：

import { mars3dPlugin } from "vite-plugin-mars3d"
export default defineConfig({plugins: [//已经省去无关部分mars3dPlugin(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))},},
})

查看全文

http://www.dtcms.com/a/503870.html