95 lines
2.5 KiB
Vue
95 lines
2.5 KiB
Vue
<template>
|
|
<div>
|
|
<div id="cesiumContainer" />
|
|
<div id="contentContainer">
|
|
<top-header />
|
|
<bottom-utils />
|
|
<content />
|
|
</div>
|
|
</div>
|
|
<map-dialog v-model:data="dialog" />
|
|
<div
|
|
v-show="coverMaskVisible"
|
|
class="coverMaskContainer"
|
|
@click="ElMessage.warning('正在标注，请等待标注完成在进行操作')"
|
|
/>
|
|
</template>
|
|
|
|
<script setup>
|
|
import autoFit from "autofit.js";
|
|
import { onMounted, ref, provide, onBeforeUnmount } from "vue";
|
|
import InitMap from "./js/initMap.js";
|
|
import TopHeader from "./components/header.vue";
|
|
import BottomUtils from "./components/bottom_utils.vue";
|
|
import Content from "./components/content.vue";
|
|
import { mapMethodsInjectionKey } from "@/views/map/js/injectionKey.js";
|
|
import { ElMessage } from "element-plus";
|
|
import mitt from "@/assets/js/mitt.js";
|
|
import {
|
|
changeCoverMaskVisibleMittKey,
|
|
showMountainFloodVillageDialog,
|
|
showReservoirStatisticsDialog,
|
|
showTailingsReservoirDialog,
|
|
} from "@/views/map/js/mittKey.js";
|
|
import MapDialog from "./components/dialog.vue";
|
|
|
|
const mapMethods = ref(null); // cesium地图方法实例
|
|
const coverMaskVisible = ref(false); // 是否显示透明遮罩，用于加载地图元素时阻止点击事件
|
|
const dialog = ref({ visible: false });
|
|
onMounted(async () => {
|
|
autoFit.init({ dw: 1920, dh: 1080, el: "#contentContainer", resize: true });
|
|
const initMap = new InitMap();
|
|
const { mapMethods: mapMethodsInstance } = initMap.initMap();
|
|
mapMethods.value = mapMethodsInstance;
|
|
mapMethodsInstance.mapFlyTo();
|
|
mitt.on(changeCoverMaskVisibleMittKey, (data) => {
|
|
coverMaskVisible.value = data;
|
|
if (!data) ElMessage.success("标注完成");
|
|
});
|
|
mitt.on(showReservoirStatisticsDialog, () => {
|
|
dialog.value = { visible: true, type: "reservoir" };
|
|
});
|
|
mitt.on(showMountainFloodVillageDialog, () => {
|
|
dialog.value = { visible: true, type: "mountain_flood_village" };
|
|
});
|
|
mitt.on(showTailingsReservoirDialog, () => {
|
|
dialog.value = { visible: true, type: "tailings_reservoir" };
|
|
});
|
|
});
|
|
onBeforeUnmount(() => {
|
|
mitt.off(changeCoverMaskVisibleMittKey);
|
|
});
|
|
provide(mapMethodsInjectionKey, mapMethods);
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
#cesiumContainer {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
position: relative;
|
|
z-index: 0;
|
|
isolation: isolate;
|
|
}
|
|
|
|
#contentContainer {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
|
|
> * {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
|
|
.coverMaskContainer {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 1;
|
|
}
|
|
</style>
|