修改显示

src/views/index.vue

@@ -854,44 +854,13 @@ const processData = (data) => {
       lon: data.Longitude,
       lat: data.Latitude,
     }
-    // console.log(data.Longitude > area.LonMin, data.Longitude < area.LonMax, data.Latitude > area.LatMin, data.Latitude < area.LatMax)
-    if (data.Longitude > area.LonMin && data.Longitude < area.LonMax && data.Latitude > area.LatMin && data.Latitude < area.LatMax) {
-      let xAndy = getXYDistanceFromMin({lon: data.Longitude, lat: data.Latitude}, {lon: area.LonMin, lat: area.LatMin})
-      let location = {}
-      if (areaType.value === 1) {
-        location = {
-          x: xAndy.xDistance,
-          y: xAndy.yDistance,
+    // boxPos.value = location
+    let data = getLocalPositionFromRect_Point1AsCenter({
+      lon: data.Longitude,
+      lat: data.Latitude,
       rotate: data.HeadingAngle
-        }
-      } else if (areaType.value === 2) {
-        location = {
-          x: areaData.value.width - xAndy.yDistance,
-          y: xAndy.xDistance,
-          rotate: data.HeadingAngle - 90
-        }
-      } else if (areaType.value === 3) {
-        location = {
-          x: areaData.value.width - xAndy.xDistance,
-          y: areaData.value.height - xAndy.yDistance,
-          rotate: data.HeadingAngle - 180
-        }
-      } else if (areaType.value === 4) {
-        location = {
-          x: xAndy.yDistance,
-          y: areaData.value.height - xAndy.yDistance,
-          rotate: data.HeadingAngle - 270
-        }
-      } else {
-        location = {
-          x: xAndy.xDistance,
-          y: xAndy.yDistance,
-          rotate: data.HeadingAngle
-        }
-      }
-      console.log('location', location)
-      boxPos.value = location
-    }
+    }, areaPoints.value, areaData.value)
+    console.log(data)
 
   }
 };
@@ -1267,9 +1236,54 @@ function getBoundingBoxAndSize(pointsArr) {
   };
 }
 
+function getLocalPositionFromRect_Point1AsCenter(point, rectPoints, rectInfo) {
+  const R = 111320;
+  const lat0 = rectPoints.reduce((a, b) => a + b.lat, 0) / rectPoints.length;
+  const cosLat = Math.cos((lat0 * Math.PI) / 180);
+  const toXY = p => ({
+    name: p.name,
+    x: p.lon * R * cosLat,
+    y: p.lat * R
+  });
+
+  const pts = rectPoints.map(toXY);
+  const p1 = pts.find(p => p.name === "点位1"); // 右下角 ✅旋转中心
+  const p4 = pts.find(p => p.name === "点位4"); // 左下角 ✅原点
+  const p = toXY(point);
+  const angle = Number(rectInfo.angle);
+  const rad = (-angle * Math.PI) / 180;
+
+  // 1️⃣ 先求相对于点位1的偏移
+  const dx1 = p.x - p1.x;
+  const dy1 = p.y - p1.y;
+  const x1_local = dx1 * Math.cos(rad) - dy1 * Math.sin(rad);
+  const y1_local = dx1 * Math.sin(rad) + dy1 * Math.cos(rad);
+
+  // 2️⃣ 求点位4相对于点位1的局部坐标，用来平移
+  const dx14 = p4.x - p1.x;
+  const dy14 = p4.y - p1.y;
+  const x14_local = dx14 * Math.cos(rad) - dy14 * Math.sin(rad);
+  const y14_local = dx14 * Math.sin(rad) + dy14 * Math.cos(rad);
+
+  // 3️⃣ 相对于左下角(点4)
+  const x_local = x1_local - x14_local;
+  const y_local = y1_local - y14_local;
+
+  // 4️⃣ 相对旋转角
+  const rotate_local = ((point.rotate ?? 0) - angle + 360) % 360;
+
+  return {
+    x: x_local.toFixed(2),
+    y: y_local.toFixed(2),
+    rotate: rotate_local.toFixed(2)
+  };
+}
+
+
 const areaData = ref({
   width: 500,
-  height: 1000
+  height: 1000,
+  angle: 0
 })
 const saveAreaPoint = () => {
   let arr = []
@@ -1278,16 +1292,9 @@ const saveAreaPoint = () => {
   })
   Promise.all(arr).then(() => {
     ElMessage.success('保存成功')
-    // let data = getBoundingBoxAndSize(areaPoints.value)
     let data = calcRectangleFromPoints(areaPoints.value)
     console.log(data)
-    // areaData.value = data
-    // area = {
-    //   "LatMin": data.minLat,
-    //   "LatMax": data.maxLat,
-    //   "LonMin": data.minLon,
-    //   "LonMax": data.maxLon
-    // }
+    areaData.value = data
   }).catch((err) => {
     ElMessage.error(err)
   })