57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
<template>
|
|
<div id="mars3dContainer" class="mars3d-container"></div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { onMounted } from "vue";
|
|
import * as mars3d from "mars3d";
|
|
|
|
onMounted(() => {
|
|
const configUrl = "http://182.90.224.147:6080/file/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);
|
|
|
|
// 开场动画
|
|
// map.openFlyAnimation();
|
|
|
|
// 针对不同终端的优化配置
|
|
if (mars3d.Util.isPCBroswer()) {
|
|
map.zoomFactor = 2.0; // 鼠标滚轮放大的步长参数
|
|
|
|
// IE浏览器优化
|
|
if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
|
|
map.viewer.targetFrameRate = 20; // 限制帧率
|
|
map.scene.requestRenderMode = false; // 取消实时渲染
|
|
}
|
|
} else {
|
|
map.zoomFactor = 5.0; // 鼠标滚轮放大的步长参数
|
|
|
|
// 移动设备上禁掉以下几个选项，可以相对更加流畅
|
|
map.scene.requestRenderMode = false; // 取消实时渲染
|
|
map.scene.fog.enabled = false;
|
|
map.scene.skyAtmosphere.show = false;
|
|
map.scene.globe.showGroundAtmosphere = false;
|
|
}
|
|
|
|
// //二三维切换不用动画
|
|
if (map.viewer.sceneModePicker) {
|
|
map.viewer.sceneModePicker.viewModel.duration = 0.0;
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.mars3d-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|