测试-新增图片旋转功能

 <!--
  * @Date: 2025-01-22 11:40:12
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-02-27 09:25:30
+ * @LastEditTime: 2025-03-04 15:13:41
  * @FilePath: /map-demo/src/views/mapCutter.vue
  * @Description: 文件描述
 -->
@@ -110,8 +110,8 @@
 
       <!-- 旋转控制 -->
       <div class="rotate-control">
-        <button class="z-button" @click="rotateMap(10)">↺</button>
-        <button class="z-button" @click="rotateMap(-10)">↻</button>
+        <button class="z-button" @click="rotateMap(1)">↺</button>
+        <button class="z-button" @click="rotateMap(-1)">↻</button>
       </div>
 
       <!-- 透明度控制 -->
@@ -408,17 +408,95 @@ const scaleImage = (factor) => {
   imageLayer.value.setBounds(bounds.value);
 };
 
-// 旋转地图
+// 在 script setup 顶部添加图片旋转角度变量
+const imageRotation = ref(0);
+
+// 修改 rotateMap 方法，只旋转图片
 const rotateMap = (deltaAngle) => {
-  if (!map.value) return;
+  if (!imageLayer.value || !imageURL.value) return;
+
+  imageRotation.value = (imageRotation.value + deltaAngle) % 360;
+  console.log(`图片旋转: ${imageRotation.value}°`);
 
-  mapRotation.value += deltaAngle;
+  const img = new Image();
+  img.src = imageURL.value;
 
-  console.log(`地图旋转: ${mapRotation.value}°`);
+  img.onload = () => {
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
 
-  map.value.setRotation(mapRotation.value);
-};
+    // 计算旋转后的画布大小
+    const angleRad = (imageRotation.value * Math.PI) / 180;
+    const cosAngle = Math.abs(Math.cos(angleRad));
+    const sinAngle = Math.abs(Math.sin(angleRad));
+
+    // 计算旋转后需要的画布尺寸
+    const newWidth = img.width * cosAngle + img.height * sinAngle;
+    const newHeight = img.width * sinAngle + img.height * cosAngle;
+
+    // 设置画布大小为旋转后的尺寸
+    canvas.width = newWidth;
+    canvas.height = newHeight;
+
+    // 移动到画布中心点
+    ctx.translate(newWidth / 2, newHeight / 2);
+    // 旋转画布
+    ctx.rotate(angleRad);
+    // 绘制图片，从中心点开始绘制
+    ctx.drawImage(img, -img.width / 2, -img.height / 2);
+
+    // 获取旋转后的图片 URL
+    const rotatedImageURL = canvas.toDataURL();
+
+    // 重新计算边界框以适应旋转后的图片
+    const sw = bounds.value.getSouthWest();
+    const ne = bounds.value.getNorthEast();
+    const centerLng = (sw.lng + ne.lng) / 2;
+    const centerLat = (sw.lat + ne.lat) / 2;
+
+    // 计算四个角的经纬度
+    const calculateCorner = (x, y, centerX, centerY) => {
+      const angle = imageRotation.value * Math.PI / 180;
+      const rotatedX = centerX + (x - centerX) * Math.cos(angle) - (y - centerY) * Math.sin(angle);
+      const rotatedY = centerY + (x - centerX) * Math.sin(angle) + (y - centerY) * Math.cos(angle);
+      return { lng: rotatedX, lat: rotatedY };
+    };
+
+    // 以图片中心点为基准
+    const centerX = centerLng;
+    const centerY = centerLat;
+
+    const topLeft = calculateCorner(sw.lng, ne.lat, centerX, centerY);
+    const topRight = calculateCorner(ne.lng, ne.lat, centerX, centerY);
+    const bottomLeft = calculateCorner(sw.lng, sw.lat, centerX, centerY);
+    const bottomRight = calculateCorner(ne.lng, sw.lat, centerX, centerY);
 
+    // 找到四个角的最小和最大经纬度
+    const minLng = Math.min(topLeft.lng, topRight.lng, bottomLeft.lng, bottomRight.lng);
+    const maxLng = Math.max(topLeft.lng, topRight.lng, bottomLeft.lng, bottomRight.lng);
+    const minLat = Math.min(topLeft.lat, topRight.lat, bottomLeft.lat, bottomRight.lat);
+    const maxLat = Math.max(topLeft.lat, topRight.lat, bottomLeft.lat, bottomRight.lat);
+
+    const newBounds = new AMap.Bounds(
+      [minLng, minLat],
+      [maxLng, maxLat]
+    );
+
+    // 更新图层
+    if (imageLayer.value) {
+      map.value.remove(imageLayer.value);
+    }
+
+    imageLayer.value = new AMap.ImageLayer({
+      url: rotatedImageURL,
+      bounds: newBounds,
+      zooms: [17, 19],
+      opacity: imageOpacity.value / 100
+    });
+
+    map.value.add(imageLayer.value);
+  };
+};
 
 const onZoomChange = (value) => { // 调整地图图层
   // map.value.setZoom(value);