Mars3D有很多很强大的功能，可以在地球上实现很多炫酷的3D效果。今天给大家分享一个功能，在地球上加载白膜数据，并飞到指定位置，不同角度查看白膜数据。
1.话不多说，先展示
加载白膜数据
2.设计思路
需要在3维地球上加载白膜数据，通过url从服务器请求白膜数据直接加载，并通过自带的方法飞到指定位置，指定视角查看白膜数据。
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";
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.rfilterColor: "#0950a9", // 滤镜颜色 color.r = color.r * filterColor.rbrightness: 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>
