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