修改显示

src/views/index.vue

@@ -362,7 +362,8 @@ const RIGHT = defineComponent({
                 <ElCard shadow="always" style={{marginTop: "12px"}}>
                   {areaPoints.value.map((i, k) => (
                       <div style={{marginBottom: "12px"}} key={k}>
-                        <ElInput onUpdate:modelValue={val => (areaPoints.value[k].name = val)} modelValue={i.name}
+                        <ElInput disabled onUpdate:modelValue={val => (areaPoints.value[k].name = val)}
+                                 modelValue={i.name}
                                  placeholder="点位名称" style={{width: "100px"}}/>
                         <ElInput
                             modelValue={i.lon} placeholder="经度"
@@ -383,7 +384,7 @@ const RIGHT = defineComponent({
 
                   <ElButton type="primary" onClick={() => {
                     InsertCListData([{
-                      name: '点位名称',
+                      name: `点位${areaPoints.value.length + 1}`,
                       lon: '1',
                       lat: '1',
                       fodAreaId: form6.value.region1,
@@ -585,6 +586,7 @@ const router = useRouter();
 const toAdmin = () => {
   router.push('/serve')
 }
+const areaType = ref(1)
 // setTimeout(() => {
 //   setZoom({lon: 120.0005, lat: 30.005}, 2)
 // }, 30000)
@@ -759,20 +761,6 @@ const setItemsId = (e) => {
 const locationData = ref({})
 const currentPosition = ref({})
 
-const getDistanceInMeters = (lon1, lat1, lon2, lat2) => {
-  const R = 6371000; // 地球半径（米）
-  const toRad = deg => deg * Math.PI / 180;
-
-  const dLat = toRad(lat2 - lat1);
-  const dLon = toRad(lon2 - lon1);
-
-  const a =
-      Math.sin(dLat / 2) ** 2 +
-      Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2;
-
-  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-  return R * c;
-}
 
 function getXYDistanceFromMin(current, minPoint) {
   const R = 6371000; // 地球半径（米）
@@ -818,11 +806,37 @@ const processData = (data) => {
     // 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 = {
-        x: xAndy.xDistance,
-        y: xAndy.yDistance,
-        rotate: data.HeadingAngle
-        // rotate: 0
+      let location = {}
+      if (areaType.value === 1) {
+        location = {
+          x: xAndy.xDistance,
+          y: xAndy.yDistance,
+          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
@@ -1110,6 +1124,7 @@ const getArea2 = () => {
 
 function getBoundingBoxAndSize(pointsArr) {
   if (!pointsArr || pointsArr.length === 0) {
+    throw new Error('pointsArr 不能为空');
   }
 
   let maxLon = Math.max(...pointsArr.map(p => p.lon));
@@ -1118,7 +1133,6 @@ function getBoundingBoxAndSize(pointsArr) {
   let minLat = Math.min(...pointsArr.map(p => p.lat));
 
   const R = 6371000;
-
   const toRad = deg => deg * Math.PI / 180;
 
   // Haversine 距离计算
@@ -1132,10 +1146,47 @@ function getBoundingBoxAndSize(pointsArr) {
     return R * c;
   };
 
-  const width = Math.round(haversineDistance(minLat, minLon, minLat, maxLon))
-  const height = Math.round(haversineDistance(minLat, minLon, maxLat, maxLon))
+  // 宽度（东西方向）
+  const width = Math.round(haversineDistance(minLat, minLon, minLat, maxLon));
+  // 高度（南北方向）
+  const height = Math.round(haversineDistance(minLat, minLon, maxLat, minLon));
 
-  return {width, height, minLat, minLon, maxLat, maxLon};
+  // 左下角参考点
+  const refPoint = {lon: minLon, lat: minLat};
+
+  // 找出距离 refPoint 最近的点
+  let nearestPoint = null;
+  let nearestDistance = Infinity;
+
+  for (const p of pointsArr) {
+    const d = haversineDistance(refPoint.lat, refPoint.lon, p.lat, p.lon);
+    if (d < nearestDistance) {
+      nearestDistance = d;
+      nearestPoint = p;
+    }
+  }
+  if (nearestPoint.name === '点位1') {
+    areaType.value = 1
+  }
+  if (nearestPoint.name === '点位2') {
+    areaType.value = 2
+  }
+  if (nearestPoint.name === '点位3') {
+    areaType.value = 3
+  }
+  if (nearestPoint.name === '点位4') {
+    areaType.value = 4
+  }
+  return {
+    width: (areaType.value === 1 || areaType.value === 3) ? width : height,
+    height: (areaType.value === 1 || areaType.value === 3) ? height : width,
+    minLat,
+    minLon,
+    maxLat,
+    maxLon,
+    nearestPoint,       // 距离左下角最近的点
+    nearestDistance: Math.round(nearestDistance) // 方便调试用
+  };
 }
 
 const areaData = ref({