qa-kangzai-vue/src/views/map/index.vue

<template>
  <div>
    <div id="cesiumContainer" />
    <div id="contentContainer">
      <top-header />
      <bottom-utils />
      <content />
    </div>
  </div>
  <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 } from "@/views/map/js/mittKey.js";

const mapMethods = ref(null); // cesium地图方法实例
const coverMaskVisible = ref(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("标注完成");
  });
});
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>