创建一个项目
yarn create vite
// vue - ts
安装依赖
yarn add vite-plugin-mars3d -D
yarn add mars3d
控制台警告
warning " > mars3d@3.5.0" has unmet peer dependency "@turf/turf@^6.5.0".
warning " > mars3d@3.5.0" has unmet peer dependency "mars3d-cesium@~1.103.1".
安装
yarn add @turf/turf mars3d-cesium
修改 vite.config.ts
import { vitePluginMars3d } from "vite-plugin-mars3d";
export default defineConfig({
plugins: [..., vitePluginMars3d()]
});
修改src\App.vue文章来源：https://www.toymoban.com/news/detail-609323.html
<script setup lang="ts">
import * as mars3d from "mars3d";
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
import "mars3d/dist/mars3d.css";
var mapOptions = {
basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }]
};
// 注意 这里加个定时器处理一下，否则cesium会报错
setTimeout(() => {
var map = new mars3d.Map("mars3dContainer", mapOptions);
}, 1000);
</script>
<template>
<div id="mars3dContainer" class="mains mars3d-container"></div>
</template>
<style scoped>
.mains {
height: 100vh;
width: 100vw;
background: #8edfe2;
}
</style>就可以启动项目 文章来源地址https://www.toymoban.com/news/detail-609323.html
到了这里，关于vue3+vite项目集成mars3d的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
