traffic-laser/src/views/scene/container.vue

<template>
  <div class="canvas-layout">
    <p v-if="currentMeterPerPixel" class="meterPerPixel">1: {{ currentMeterPerPixel }}</p>
    <div class="scene-canvas" ref="sceneLayoutRef" />
  </div>
</template>

<script setup lang="ts">
import { onActivated, onDeactivated, onMounted, ref, watchEffect } from "vue";
import { customMap, disabledMap, setupLaser, useLoading, useParams } from "@/hook";
import { store } from "@/store";
import { currentApp } from "@/store/app";
import { Loading } from "@kankan/components/index";
import { LaserSDK, Mode, SeSceneCropSetting } from "@/sdk";
import { api } from "@/store/sync";
import { sceneSeting } from "@/store/sceneSeting";

const emit = defineEmits<{ (e: "loaded"): void }>();
const sceneLayoutRef = ref<HTMLCanvasElement>();
const active = ref(true);

onActivated(() => (active.value = true));
onDeactivated(() => (active.value = false));

const handlerSDK = (sdk: LaserSDK) => {
  watchEffect(() => {
    sdk.scene.emit("visible", active.value);
  });
};

const currentMeterPerPixel = ref(0);

onMounted(async () => {
  const sdk = await useLoading(
    setupLaser({
      sceneSelector: sceneLayoutRef.value,
      num: useParams().m,
      store: store,
      isDebug: useParams().test,
      getFileUrl: api.getFile,
      webSite: "",
      axios: null,
      basePath: currentApp.basePath,
    })
  );

  emit("loaded");

  sdk.scene.on("posChange", (pos) => {
    currentMeterPerPixel.value = pos.meterPerPixel
      ? Math.round(1 / pos.meterPerPixel)
      : null;
  });

  watchEffect(() => {
    if (sceneSeting.value) {
      sdk.scene.setSceneCropSetting({
        top: { value: sceneSeting.value.top },
        rotate: { value: sceneSeting.value.rotate },
        scale: { value: sceneSeting.value.scale },
      });
    } else {
      const setting = sdk.scene.getSceneCropSetting();
      console.log(setting);
      sceneSeting.value = {
        top: setting.top.value,
        rotate: setting.rotate.value,
        scale: setting.scale.value,
      };
    }
  });

  // 156  170
  // 90
  setTimeout(() => {
    watchEffect(() => {
      const doms = Array.from(
        sceneLayoutRef.value.querySelectorAll("#navCube, #home")
      ) as HTMLElement[];
      if (!disabledMap.mode) {
        if (customMap.mode === Mode.pano) {
          doms.forEach((dom) => {
            dom.style.display = "none";
          });
        } else {
          doms.forEach((dom) => {
            dom.style.display = "block";
          });
        }
      }
      handlerSDK(sdk);
    });
    Loading.hideAll();
  }, 1000);
});
</script>

<style scoped lang="scss">
.canvas-layout {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 0;
}

.scene-canvas {
  width: 100%;
  height: 100%;
}

.dire-canvas {
  position: absolute;
  right: 0;
  top: 0;
}
</style>

<style lang="scss">
.canvas-layout {
  .meterPerPixel,
  #navCube {
    position: absolute !important;
    right: calc(var(--boundMargin) + 10px) !important;
    top: calc(var(--boundMargin) + 10px) !important;
    // z-index: 1;
  }
  #home {
    position: absolute !important;
    right: var(--boundMargin) !important;
    top: var(--boundMargin) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px !important;
    height: 20px !important;
    font-family: "iconfont" !important;
    font-size: 20px;
    color: #fff;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    background: none !important;
    z-index: 2;
    color: #fff;
    transition: all 0.3s ease;

    &:before {
      content: "\e73e";
      pointer-events: none;
    }

    &:active {
      color: #3290ff;
    }
  }

  .meterPerPixel {
    text-align: center;
    width: 100px;
    color: #fff;
    margin-top: 100px;
    z-index: 999;
    pointer-events: none;
    font-weight: 400;
    line-height: 23px;
    font-size: 20px;
    text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
  }
}
</style>