fix: 1

src/util/gl.ts

@@ -235,22 +235,22 @@ export const createFPSCamera = (
 
   const start = vec2.create();
   const mousedownHandler = (ev: MouseEvent) => {
-    start[0] = ev.offsetX;
-    start[1] = ev.offsetY;
+    start[0] = ev.clientX;
+    start[1] = ev.clientY;
 
-    mount.addEventListener("mousemove", mouseMoveHandler);
-    mount.addEventListener("mouseup", mouseUpHandler);
+    document.documentElement.addEventListener("mousemove", mouseMoveHandler);
+    document.documentElement.addEventListener("mouseup", mouseUpHandler);
   };
 
   const rotatePixelAmount = 1500;
   const mouseMoveHandler = (ev: MouseEvent) => {
-    const end = vec2.fromValues(ev.offsetX, ev.offsetY);
+    const end = vec2.fromValues(ev.clientX, ev.clientY);
     const move = vec2.sub(vec2.create(), end, start);
     pitch += (move[1] / rotatePixelAmount) * Math.PI;
-    if (pitch > 89) {
-      pitch = 89;
-    } else if (pitch < -89) {
-      pitch = -89;
+    if (pitch > Math.PI / 2) {
+      pitch = Math.PI / 2;
+    } else if (pitch < -Math.PI / 2) {
+      pitch = -Math.PI / 2;
     }
     yaw -= (move[0] / rotatePixelAmount) * Math.PI;
     start[0] = end[0];
@@ -260,8 +260,8 @@ export const createFPSCamera = (
   };
 
   const mouseUpHandler = () => {
-    mount.removeEventListener("mousemove", mouseMoveHandler);
-    mount.removeEventListener("moseup", mouseUpHandler);
+    document.documentElement.removeEventListener("mousemove", mouseMoveHandler);
+    document.documentElement.removeEventListener("moseup", mouseUpHandler);
   };
   const wheelHandler = (ev: WheelEvent) => {
     const amount = ev.deltaY * -0.01;
@@ -290,6 +290,11 @@ export const createFPSCamera = (
       updateFront();
       updateCameraMat();
     },
+    setYaw(_yaw: number) {
+      yaw = _yaw
+      updateFront();
+      updateCameraMat();
+    },
     destory: mergeFuns(mouseUpHandler, () =>
       document.removeEventListener("wheel", wheelHandler)
     ),

src/view/map/install.ts

@@ -16,7 +16,7 @@ mapManage.setCenter(defaultCenter);
 watchEffect(() => mapManage.setTileType(tileType.value));
 
 export const noValidPoint = (pos: ScenePoint) =>
-  !pos.pos || pos.pos.length === 0 || pos.pos.some((i) => !i);
+  !pos?.pos || pos.pos.length === 0 || pos.pos.some((i) => !i);
 export const validScene = (scene: Scene) => !scene.scenePos.every(noValidPoint);
 
 export const flyScene = (scene: Scene) => {

src/view/map/pc4Helper.ts

@@ -75,10 +75,20 @@ export const exportImage = async (points: ScenePoint[], name?: string) => {
   const downloadImages = Promise.all(
     points.map((point) => {
       const url = getPointPano(point) as string;
+
+
       let loadBlob: Promise<Blob>
-      if (noValidPoint(point.pos as any)) {
-        const ration = 6;
-        loadBlob = addWatermark(url, point!.pos, ration)
+      console.log(point.pos, noValidPoint(point.pos as any))
+      if (!noValidPoint(point)) {
+        let ration = 6;
+        loadBlob = new Promise<void>(resolve => {
+          const img = new Image()
+          img.src = url
+          img.onload = () => {
+            ration = img.width / 2730
+            resolve()
+          }
+        }).then(() => addWatermark(url, point!.pos, ration))
       } else {
         loadBlob = fetch(url).then(res => res.blob())
       }

src/view/pano/env.ts

@@ -79,7 +79,7 @@ const getDrawVaring = (gl: WebGL2RenderingContext) => {
   };
 };
 
-export const init = (canvas: HTMLCanvasElement) => {
+export const init = (canvas: HTMLCanvasElement, initYaw: number) => {
   let activeTex: "skyCubeTex1" | "skyCubeTex" = "skyCubeTex1";
   const gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true })!;
   const program = createProgram(gl, envVertSource, envFragSource);
@@ -126,7 +126,7 @@ export const init = (canvas: HTMLCanvasElement) => {
 
   setSize([canvas.width, canvas.height]);
   const fps = createFPSCamera(
-    canvas.parentElement!,
+    canvas!,
     (nViewMat) => {
       mat4.copy(viewMat, nViewMat);
       updateInv();
@@ -134,12 +134,16 @@ export const init = (canvas: HTMLCanvasElement) => {
     },
     [0, 1, 0],
     [0, 0, 0],
-    { yaw: glMatrix.toRadian(0) },
+    { yaw: glMatrix.toRadian(initYaw) },
     80
   );
   return {
     setSize,
     redraw,
+    setYaw(yaw: number) {
+      fps.setYaw(yaw)
+      redraw()
+    },
     changeUrls(urls: string | string[]) {
       fps.recovery();
       return varing.preset(urls).then(() => {

src/view/pano/pano.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pano-layout" v-loading="loading" >
+  <div class="pano-layout" v-loading="loading" :element-loading-text="loadingStr">
     <canvas ref="panoDomRef"></canvas>
     <div class="btns">
       <el-button
@@ -50,7 +50,8 @@
 import SingleInput from "@/components/point-input.vue";
 import { router, setDocTitle } from "@/router";
 import { mergeFuns, round } from "@/util";
-import { computed, onMounted, onUnmounted, ref, watchEffect } from "vue";
+import { glMatrix } from "gl-matrix";
+import { computed, nextTick, onMounted, onUnmounted, ref, watchEffect } from "vue";
 import { init } from "./env";
 import {
   updateScenePointName,
@@ -91,12 +92,12 @@ watchEffect(() => {
 
 const panoUrls = computed(() => {
   return (
-    point.value &&
-    getPointPano(point.value, point.value.cameraType === DeviceType.CLUNT)
+    point.value && getPointPano(point.value, point.value.cameraType === DeviceType.CLUNT)
   );
 });
 const update = ref(false);
 const loading = ref(false);
+const loadingStr = ref("");
 
 const getGis = () => {
   const pos = point.value!.pos as number[];
@@ -113,6 +114,7 @@ const copyGis = async () => {
 
 const photo = async () => {
   loading.value = true;
+  loadingStr.value = "原图提取中";
   await new Promise((resolve) => setTimeout(resolve, 300));
   const ration = tempRadion.value;
   console.log("ration", ration);
@@ -138,7 +140,7 @@ const setSize = (ration: number, w?: number, h?: number) => {
 
 onMounted(() => {
   if (!panoDomRef.value) throw "没有canvas DOM";
-  pano = init(panoDomRef.value);
+  pano = init(panoDomRef.value, 0);
   const resizeHandler = () => {
     setSize(devicePixelRatio);
   };
@@ -150,6 +152,9 @@ onMounted(() => {
       if (panoUrls.value) {
         loading.value = true;
         pano.changeUrls(panoUrls.value).then(() => (loading.value = false));
+        pano.setYaw(
+          point.value.cameraType === DeviceType.CLUNT ? glMatrix.toRadian(180) : 0
+        );
       }
     }),
     pano.destory,
@@ -161,10 +166,7 @@ onMounted(() => {
 
 onUnmounted(() => mergeFuns(...destroyFns)());
 watchEffect(() => {
-  if (
-    router.currentRoute.value.name.toString().includes("pano") &&
-    point.value
-  ) {
+  if (router.currentRoute.value.name.toString().includes("pano") && point.value) {
     setDocTitle(point.value.index.toString() || relics.value.name);
   }
 });