【Mars3D项目实战开发】vue3+vite搭建配置项3维地球

Mars3D有很多很强大的功能，可以在地球上实现很多炫酷的3D效果。今天给大家分享一个最基础的功能，根据配置项内容创建3D地球。

1.话不多说，先展示

2.设计思路

根据项目需求要求，使用vue3+vite搭建框架，使用Mars3d，动态创建一个可调整色调的3维地球。

3.具体代码

<script setup>
import * as Cesium from "mars3d-cesium";
import * as mars3d from "mars3d";
//引入cesium基础库
import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";
//导入mars3d主库
import "mars3d/mars3d.css"; //v3.8.6及之前版本使用 import "mars3d/dist/mars3d.css";

//导入mars3d插件（按需使用，需要先npm install）
import "mars3d-space";
import { ref, onMounted, reactive } from "vue";

var map = reactive(null);

var mapOptions = {
  terrain: {
    //地形
    url: "http://data.mars3d.cn/terrain",
    show: true,
  },
  scene: {
    // center: {
    //   "lat": 37.35506,
    //   "lng": 112.401622,
    //   "alt": 41355.9,
    //   "heading": 2.3,
    //   "pitch": -35.5
    // },//默认相机视角
    showSun: false, //是否显示太阳
    showMoon: false, //是否显示月亮
    showSkyBox: true, //是否显示天空盒
    showSkyAtmosphere: false, //是否显示地球大气层外光圈
    contextmenu: false,
    fog: false, //是否启用雾化效果
    globe: {
      showGroundAtmosphere: false,
      enableLighting: false,
      depthTestAgainstTerrain: true, // 地形检测，不加无法投射到地形上
    },
    fxaa: true, // 不开启抗锯齿，可视域会闪烁
    skyBox: {
      type: "ground",
      sources: {
        positiveX: "../assets/imgs/skybox/lantian/Right.jpg",
        negativeX: "../assets/imgs/skybox/lantian/Left.png",
        positiveY: "../assets/imgs/skybox/lantian/Front.png",
        negativeY: "../assets/imgs/skybox/lantian/Back.png",
        positiveZ: "../assets/imgs/skybox/lantian/Up.png",
        negativeZ: "../assets/imgs/skybox/lantian/Down.png",
      },
    },
  },

  basemaps: [
    {
      name: "天地图电子底图",
      layer: "vec_d",
      type: "tdt",
      invertColor: false, // 反向颜色 color.r = 1.0 - color.r
      filterColor: "#0950a9", // 滤镜颜色  color.r = color.r * filterColor.r
      brightness: 2, // 亮度
      contrast: 0.6, // 对比度
      hue: 0.1, // 色彩
      saturation: 1, // 饱和度
      gamma: 0.2, // 伽马值
      opacity: 1, // 透明度
      minimumLevel: 0,
      maximumLevel: 18,
      key: ["填写自己申请的天地图key"],
      show: true,
    },
  ],
};

onMounted(() => {
  map = new mars3d.Map("mars3dContainer", mapOptions);
});

</script>

<template>
  <div id="mars3dContainer" class="mars3dBox"></div>
</template>

<style scoped>
.mars3dBox {
  width: 100%;
  height: 100%;
}
</style>