[mars3d] 创建vite项目，集成mars3d

最新推荐文章于 2024-07-25 11:05:39 发布

小小的杰茜

最新推荐文章于 2024-07-25 11:05:39 发布

阅读量701

点赞数 1

分类专栏：前端开发 mars3d vue3.0 文章标签： vue.js npm 前端

本文链接：https://blog.csdn.net/m0_53584457/article/details/125331355

版权

mars3d 同时被 3 个专栏收录

38 篇文章 5 订阅

订阅专栏

前端开发

24 篇文章 0 订阅

订阅专栏

11 篇文章 0 订阅

订阅专栏

本教程指导如何使用Vite搭建项目，并集成Mars3D SDK以创建一个3D地球展示。首先，通过npm初始化Vite项目，并确保其正常运行。接着，安装Mars3D主库及相关依赖。在vite.config.ts中配置参数。然后，在模板中设置地球容器，并在Vue的onMounted钩子中创建地球实例。如果地球未显示，检查是否为容器宽度问题或DOM未正确获取。

摘要由CSDN通过智能技术生成

第一步：创建vite项目，并确保成功运行 vite 官网

没有npm包的需要安装npm；输入命令，创建vite项目；并确定项目能运行成功

npm init vite@latest

第二步：集成mars3d

获取 Mars3D SDK类库【mars3d的官网教程】

// 输入命令安装mars3d主库
npm install mars3d --save

集成mars3d 【mars3d的官网教程】

// 安装依赖库，之后在vite.config.ts中修改参数
npm install vite-plugin-mars3d -save --dev

修改 vite.config.ts 配置红色框框是新添加的参数

以上操作执行结束之后再好在重装下依赖 - npm install

第三步：创建地球

<template>
  <!-- 给地球的容器，装载地球 -->
  <div id="mars3dContainer" class="mars3d-container"></div>
</template>

<script setup lang="ts"> 
import { onMounted } from "vue";
import * as mars3d from "mars3d";

// 创建地球
onMounted(() => {
  var mapOptions = {
    basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
  };
  var map = new mars3d.Map("mars3dContainer", mapOptions);
});
</script>