4pc/src/view/pano/pano.vue

<template>
  <div class="pano-layout" v-loading="loading">
    <canvas ref="panoDomRef"></canvas>
    <div class="btns">
      <el-button
        size="large"
        type="primary"
        style="margin-right: 20px; width: 100px"
        @click="photo"
      >
        屏幕拍照
      </el-button>
      <el-button
        size="large"
        style="margin-right: 20px; width: 100px"
        @click="copyGis"
        v-if="point?.pos"
      >
        复制经纬度
      </el-button>
      <el-button
        size="large"
        type="primary"
        style="width: 100px"
        @click="update = true"
        v-if="router.currentRoute.value.name === 'pano'"
      >
        修改名称
      </el-button>
    </div>
  </div>
  <SingleInput
    v-if="point"
    :visible="update"
    @update:visible="update = false"
    :value="point.name || ''"
    :update-value="tex => updateScenePointName(point!, tex)"
    title="修改点位名称"
  />
</template>

<script setup lang="ts">
import SingleInput from "@/components/single-input.vue";
import { router, setDocTitle } from "@/router";
import { mergeFuns } from "@/util";
import { computed, onMounted, onUnmounted, ref, watchEffect } from "vue";
import { init } from "./env";
import {
  scenePoints,
  updateScenePointName,
  getPointPano,
  ScenePoint,
} from "@/store/scene";
import { copyText, toDegrees } from "@/util";
import { ElMessage } from "element-plus";
import { relicsScenePosInfoFetch } from "@/request";
import saveAs from "@/util/file-serve";

type Params = { pid?: string } | null;
const params = computed(() => router.currentRoute.value.params as Params);
const panoDomRef = ref<HTMLCanvasElement>();
const destroyFns: (() => void)[] = [];
const point = ref<ScenePoint>();
watchEffect(() => {
  if (params.value?.pid) {
    const pid = Number(params.value!.pid);
    const cachePoint = scenePoints.value.find((point) => point.id === pid);
    if (!cachePoint) {
      relicsScenePosInfoFetch(pid).then((data) => (point.value = data));
    } else {
      point.value = cachePoint;
    }
  }
});

const panoUrls = computed(
  () => point.value && getPointPano(point.value.sceneCode, Number(point.value.uuid))
);
const update = ref(false);
const loading = ref(false);

const copyGis = async () => {
  const pos = point.value!.pos;
  await copyText(
    `经度:${toDegrees(pos[0])}, 纬度: ${toDegrees(pos[1])}, 高程: ${pos[2]}`
  );
  ElMessage.success("经纬度高程复制成功");
};

const photo = () => {
  panoDomRef.value!.toBlob(async (blob) => {
    if (blob) {
      await saveAs(blob, "pano.png");
      ElMessage.success("图片导出成功");
    }
  }, "image/png");
};

onMounted(() => {
  if (!panoDomRef.value) throw "没有canvas DOM";
  const canvas = panoDomRef.value;
  canvas.width = canvas.offsetWidth * 4;
  canvas.height = canvas.offsetHeight * 4;
  const pano = init(canvas);

  destroyFns.push(
    watchEffect(() => {
      if (panoUrls.value) {
        loading.value = true;
        pano.changeUrls(panoUrls.value).then(() => (loading.value = false));
      }
    }),
    pano.destory
  );
});

onUnmounted(() => mergeFuns(...destroyFns)());
watchEffect(() => {
  if (router.currentRoute.value.name === "pano" && point.value) {
    setDocTitle(point.value.name);
  }
});
</script>

<style scoped lang="scss">
.pano-layout,
canvas {
  width: 100%;
  height: 100%;
}

.pano-layout {
  position: relative;
  .btns {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 40px;
    z-index: 1;
  }
}
</style>