JT-CIM/src/views/Map3d/Map3DMain.vue

<script setup>
	/**
	 * element-plus组件
	 */
	import {
		ElMessage
	} from 'element-plus';

	//组件异步加载
	import {
		defineAsyncComponent,
		markRaw,
		computed,
		provide,
		ref
	} from 'vue';

	import {
		Store
	} from '@/store/index'
	store = Store()

	import {
		useWidgetStore,
		Widget
	} from "@/common/store/widget"

	import map3d from './components/map.vue';
	import JtWidget from "./widget.vue"

	const widgetStore = useWidgetStore()
	// widgetStore.state.widgets = store.aa;

	// widgetStore.state.widgets = [{
	// 	component: markRaw(defineAsyncComponent(() => import("@/views/map3d/components/layer.vue"))),
	// 	name: "layer",
	// 	autoDisable: true,
	// 	group: "manage",
	// } ];

	const widgets = computed(() => widgetStore.state.widgets);
	const openAtStart = computed(() => widgetStore.state.openAtStart);

	let jtMap3dInstance = null;
	let isJTMap3DOnload = ref(false);
	const jtMap3DOnload = (map) => {
		console.log("map构造完成", map)
		jtMap3dInstance = map;
		isJTMap3DOnload.value = true
	}
	provide("getMapInstance", () => {
		return jtMap3dInstance;
	});
</script>

<template>
	<div class="jt-map3dMain">

		<!-- 地图组件 -->
		<map3d @onload="jtMap3DOnload" ref="refMap3d" />

		<!-- 地图加载完成后，在加载其他组件 -->
		<template v-if="isJTMap3DOnload">

			<template v-for="comp in widgets" :key="comp.key">
				<jt-widget v-if="openAtStart.includes(comp.name) && comp.visible" v-model:visible="comp.visible" :widget="comp" />
			</template>

		</template>
	</div>
</template>

<script>
	import useLifecycle from "@/common/uses/use-lifecycle"
	import * as mapWork from "./map"
	let store = undefined

	// 启用map.ts生命周期
	useLifecycle(mapWork)

	export default {
		name: "JtMap3DMain",

		/**
		 *  数据 
		 */
		data() {
			return {

			}
		},

		/**
		 *  方法 
		 */
		methods: {
			init() {

				//默认加载图层控制
				mapWork.getLayers().then(layers => {
					layers.map((item) => {
						if (item.isinit === '1') {

							//图层ID
							let serviceId = "service_" + item.layercode + item.layerorder;
							item.serviceId = serviceId;

							//透明度
							let opacity = 1;
							if (item.opacity == null) {
								opacity = 1;
							} else {
								opacity = Number(item.opacity);
							}
							item.opacity = opacity;

							//默认加载
							mapWork.setLayersControl(window.viewer, item, true).then(res => {
								if (res === true) {

								} else {
									ElMessage(res)
								}
							});
						}

						//默认展开
						if (item.isexpand === '1') {
							store.expandedKeys.push(item.id);
						}

						// 复选框默认选中
						if (item.isinit === '1') {
							store.checkedkeys.push(item.id);
						}
					})
				});

				// 默认加载底图切换
				mapWork.getBaseMaps().then(baseMaps => {
					baseMaps.map((item) => {
						//图层ID
						let serviceId = "service_" + item.layercode + item.layerorder;
						item.serviceId = serviceId;

						//透明度
						let opacity = 1;
						if (item.opacity == null) {
							opacity = 1;
						} else {
							opacity = Number(item.opacity);
						}
						item.opacity = opacity;

						if (item.layertype === '地形') {
							store.terrain.terrainData = item;

							if (item.isinit === '1') {
								store.terrain.isTerrain = true;

								//默认加载的地形
								mapWork.setLayersControl(window.viewer, item, true).then(res => {
									if (res === true) {

									} else {
										ElMessage(res)
									}
								});
							}
						} else if (item.layertype === '标注') {
							store.mark.markData = item;

							if (item.isinit === '1') {
								store.mark.isMark = true;

								//默认加载的标注
								mapWork.setLayersControl(window.viewer, item, true).then(res => {
									if (res === true) {

									} else {
										ElMessage(res)
									}
								});
							}
						} else {
							if (item.isinit === '1') {
								store.basemap.selectBaseMap = item;
								store.basemap.selectImg = item.layerorder;

								//默认加载的底图
								mapWork.setLayersControl(window.viewer, item, true).then(res => {
									if (res === true) {

									} else {
										ElMessage(res)
									}
								});
							}
						}
					})
				});
			}
		},

		mounted() {
			this.init();
		}
	};
</script>
<style lang="scss" scoped>

</style>