vue3 + vite + ts 集成mars3d

前言

使用mars3d過(guò)程中，需要集成mars3d到自己的項(xiàng)目中，mars3d開(kāi)發(fā)教程中已經(jīng)有集成好的項(xiàng)目模板
http://mars3d.cn/doc.html
項(xiàng)目模板gitte地址：https://gitee.com/marsgis/mars3d-vue-template/tree/master/mars3d-vue3-vite
如果不想用官方的模板就需要自己集成

一、創(chuàng)建一個(gè)vue3 + vite + ts項(xiàng)目

如何創(chuàng)建項(xiàng)目參考網(wǎng)上的教程，這里就不做詳細(xì)的說(shuō)明，我們直接步入正題。

二、引入mars3d相關(guān)依賴(lài)

這里使用npm的方式引用
1、引入mars3d

npm install mars3d --save

2、引入mars3d-cesium

npm install mars3d-cesium --save

到目前為止mars3d最主要的依賴(lài)庫(kù)已經(jīng)安裝好了

三、vite.config.ts 相關(guān)配置

參考教程：安裝mars3d vite插件庫(kù)
具體配置如下

到這步基本配置就完成了

四、 新建DIV容器 + 創(chuàng)建地圖

1、在app.vue中使用組件main-view

2、創(chuàng)建main-view組件

<template>
  <div id="mars3dContainer" class="mars3d-container"></div>
</template>

<script lang="ts" setup>
import { onMounted,reactive } 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>
  <style lang="less" scoped>
</style>

到這步不出意外的話(huà)Mars3d地球已經(jīng)出來(lái)了。

其它問(wèn)題：
這是基本配置，可以在public文件夾下新建config文件，文件夾下新建config.json文件
http://mars3d.cn/config/config.json

main-view組件改動(dòng)一下

<template>
  <div id="mars3dContainer" class="mars3d-container"></div>
</template>

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

onMounted(() => {
  const configUrl = `${process.env.BASE_URL}config/config.json`;
  mars3d.Util.fetchJson({ url: configUrl }).then((data) => {
    initMars3d(data.map3d);
  });
});

// const router = useRouter()

let map: any;
const initMars3d = (option: any) => {

  map = new mars3d.Map("mars3dContainer", option);

  // 開(kāi)場(chǎng)動(dòng)畫(huà)
  // map.openFlyAnimation();

  // 針對(duì)不同終端的優(yōu)化配置
  if (mars3d.Util.isPCBroswer()) {
    map.zoomFactor = 2.0; // 鼠標(biāo)滾輪放大的步長(zhǎng)參數(shù)

    // IE瀏覽器優(yōu)化
    if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
      map.viewer.targetFrameRate = 20; // 限制幀率
      map.scene.requestRenderMode = false; // 取消實(shí)時(shí)渲染
    }
  } else {
    map.zoomFactor = 5.0; // 鼠標(biāo)滾輪放大的步長(zhǎng)參數(shù)

    // 移動(dòng)設(shè)備上禁掉以下幾個(gè)選項(xiàng)，可以相對(duì)更加流暢
    map.scene.requestRenderMode = false; // 取消實(shí)時(shí)渲染
    map.scene.fog.enabled = false;
    map.scene.skyAtmosphere.show = false;
    map.scene.globe.showGroundAtmosphere = false;
  }

  // //二三維切換不用動(dòng)畫(huà)
  if (map.viewer.sceneModePicker) {
    map.viewer.sceneModePicker.viewModel.duration = 0.0;
  }
};
</script>
  <style lang="less" scoped>
.mars3d-container {
  width: 100%;
  height: 100%;
  overflow: hidden;

}
</style>

基本上一個(gè)炫酷的地球就完成了
如果控制臺(tái)報(bào) 資源圖片沒(méi)有找到 404錯(cuò)誤，就把官方示例下載下來(lái) ，把public/img文件拷貝到 對(duì)應(yīng)你的問(wèn)夾下就可以了
附：整個(gè)項(xiàng)目結(jié)構(gòu)目錄
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-458360.html

到了這里，關(guān)于vue3 + vite + ts 集成mars3d的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！