fix 保存图片时，按照旋转角度切图

@@ -11,12 +11,12 @@ import dayjs from "dayjs";
 
 const tileSize = 512;
 
-export function TileCutter(imageURL, bounds, zoomLevel) {
+export function TileCutter(imageURL, bounds, zoomLevel, imageRotation = 0) {
   const img = new Image();
   img.crossOrigin = "Anonymous"; // 避免跨域问题
   img.src = imageURL;
   img.onload = () => {
-    sliceImageToTiles(img, bounds, zoomLevel);
+    sliceImageToTiles(img, bounds, zoomLevel, imageRotation);
   };
 }
 
@@ -27,7 +27,7 @@ export function TileCutter(imageURL, bounds, zoomLevel) {
  * @param {L.LatLngBounds} bounds - 图片边界范围，包含西南角和东北角的经纬度
  * @param {number} zoomLevel - 地图缩放级别
  */
-function sliceImageToTiles(image, bounds, zoomLevel) {
+function sliceImageToTiles(image, bounds, zoomLevel, imageRotation) {
   // 创建画布及上下文
   const canvas = document.createElement("canvas");
   const ctx = canvas.getContext("2d");
@@ -89,6 +89,11 @@ function sliceImageToTiles(image, bounds, zoomLevel) {
       // 清空画布
       ctx.clearRect(0, 0, tileSize * scaleFactor, tileSize * scaleFactor);
 
+      // 旋转画布
+      ctx.translate(tileSize / 2, tileSize / 2); // 移动原点到画布中心
+      ctx.rotate(imageRotation * Math.PI / 180); // 旋转画布
+      ctx.translate(-tileSize / 2, -tileSize / 2); // 移回原点
+
       // 绘制图片到画布
       ctx.drawImage(
         image,
@@ -96,6 +101,9 @@ function sliceImageToTiles(image, bounds, zoomLevel) {
         tileImgX, tileImgY, tileImgWidth, tileImgHeight // 目标画布区域（保持实际位置和比例）
       );
 
+      // 恢复画布旋转
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+
       // 将画布内容转换为Blob对象
       canvas.toBlob((blob) => {
         if (!blob) {

 <!--
  * @Date: 2025-01-22 11:40:12
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-03-04 16:07:51
+ * @LastEditTime: 2025-03-04 17:53:13
  * @FilePath: /map-demo/src/views/mapCutter.vue
  * @Description: 文件描述
 -->
@@ -361,7 +361,7 @@ function cutTiles() {
     return;
   }
   // TAG： 切割瓦片等级
-  TileCutter(imageURL.value, bounds.value, map_zoom.value); // 传入图片、地图范围、缩放级别
+  TileCutter(imageURL.value, bounds.value, map_zoom.value, imageRotation.value); // 传入图片、地图范围、缩放级别和旋转角度
 }
 
 // ✅ 1. 位置移动