JT-CIM/src/views/Main/MainView.vue

<script setup>
	import JtHeader from './components/header.vue';
	import modifyModule from './components/modifyPassword.vue';
	import ZhHeader from "./components/ZhHeader.vue";
	import map3d from './components/map.vue';
	import {
		provide
	} from "vue";
	provide("getMapInstance", () => {
		return jt3d;
	});
	
</script>
<template>
	<div class="Mainpage">
		<!-- 顶栏容器 -->
		<!-- <JtHeader @handleSelect="handleSelect" /> -->
		<ZhHeader></ZhHeader>
		<map3d @onload="jtMap3DOnload" ref="refMap3d" class="map3d" />
		<!-- 控制路由页面是否缓存 -->
		<router-view v-slot="{ Component }" v-if="mapLoaded">
			<keep-alive>
				<component :is=" Component" v-if="$route.meta.keepAlive" />
			</keep-alive>
			<component :is="Component" v-if="!$route.meta.keepAlive" />
		</router-view>
		
		<!-- 修改密码 -->
		<!-- <modifyModule ref="modifyMoudle"></modifyModule> -->
	</div>
	
</template>

<script>
	import {
		Store
	} from '@/store/index'
	let store = Store();
	let jt3d = undefined;
	export default {
		name: 'MainView',

		/* 数据 */
		data() {
			return {
				mapLoaded:false,//保证地图加载完成，在加载子路由
			}
		},

		/* 方法 */
		methods: {
			//修改密码弹出框事件
			modifyMoudle() {
				this.$refs.modifyMoudle.isshow = true
			},
			jtMap3DOnload(map) {
				jt3d = map;
				this.mapLoaded = true;
				console.log('地图实例',jt3d)
				store.jt3d = jt3d
			},
		},
		mounted() {

		}
	}
</script>

<style lang="scss" scoped>
	.Mainpage{
		position: relative;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.map3d{
		z-index: 5;
	}
</style>