vue3 + mars3D 三分钟画一个地球

勇敢di牛牛2025-10-20 13:22

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))
    },
  },
})