【Mars3D项目实战开发】加载地图白膜数据，并飞到指定位置不同角度查看白膜数据

Mars3D有很多很强大的功能，可以在地球上实现很多炫酷的3D效果。今天给大家分享一个功能，在地球上加载白膜数据，并飞到指定位置，不同角度查看白膜数据。

1.话不多说，先展示

加载白膜数据

2.设计思路

需要在3维地球上加载白膜数据，通过url从服务器请求白膜数据直接加载，并通过自带的方法飞到指定位置，指定视角查看白膜数据。

3.具体代码

bash 复制代码

<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";
import axios from "axios";

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

var map = reactive(null);
var list = ref([]);

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);

  getBm();

});

//加载白膜数据 并动画到指定位置
const getBm = () => {
  var tiles3dLayer1 = new mars3d.layer.TilesetLayer({
    name: "白膜数据",
    url: "http://172.16.10.83:9509/map3d/wbl/BM4/tileset.json",
    position: {
      alt: 0,
    },
    maximumScreenSpaceError: 256,
    zIndex: 3,
    show: true,
  });
  map.addLayer(tiles3dLayer1);

  //飞到指定经纬度
  map.openFlyAnimation({
    center: {
      lat: 37.84331,
      lng: 112.543554,
      alt: 1587.8,
      heading: 296,
      pitch: -17.2,
    },
  });
};


</script>

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

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