fix 切图旋转功能优化

 /*
 /*
  * @Date: 2025-01-22 11:45:30
  * @Date: 2025-01-22 11:45:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-02-27 09:41:24
+ * @LastEditTime: 2025-03-12 09:44:10
  * @FilePath: /map-demo/src/utils/TileCutter.js
  * @FilePath: /map-demo/src/utils/TileCutter.js
  * @Description: 文件描述
  * @Description: 文件描述
  */
  */
@@ -67,11 +67,9 @@ function sliceImageToTiles(image, bounds, zoomLevel, imageRotation) {
   // 设置画布缩放
   // 设置画布缩放
   ctx.scale(scaleFactor, scaleFactor);
   ctx.scale(scaleFactor, scaleFactor);
 
 
-  const zip = new JSZip();  // 创建一个 JSZip 实例，用来打包所有瓦片
+  const zip = new JSZip();
+  let tileIndex = 0;
 
 
-  let tileIndex = 0;  // 瓦片索引，用来给每个瓦片命名
-
-  // 计算每个瓦片的经纬度范围
   for (let tileX = tileStartX; tileX <= tileEndX; tileX++) {
   for (let tileX = tileStartX; tileX <= tileEndX; tileX++) {
     for (let tileY = tileStartY; tileY <= tileEndY; tileY++) {
     for (let tileY = tileStartY; tileY <= tileEndY; tileY++) {
       // 计算当前瓦片的经纬度范围
       // 计算当前瓦片的经纬度范围
@@ -89,20 +87,29 @@ function sliceImageToTiles(image, bounds, zoomLevel, imageRotation) {
       // 清空画布
       // 清空画布
       ctx.clearRect(0, 0, tileSize * scaleFactor, tileSize * scaleFactor);
       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.save();
+
+      // 计算图片在瓦片中的中心点
+      const imgCenterX = tileImgX + tileImgWidth / 2;
+      const imgCenterY = tileImgY + tileImgHeight / 2;
+
+      // 将原点移动到图片中心
+      ctx.translate(imgCenterX, imgCenterY);
+
+      // 应用旋转
+      ctx.rotate(imageRotation * Math.PI / 180);
 
 
-      // 绘制图片到画布
+      // 绘制图片，需要考虑旋转后的偏移
       ctx.drawImage(
       ctx.drawImage(
         image,
         image,
-        0, 0, imgWidth, imgHeight, // 源图像区域（使用完整图片）
-        tileImgX, tileImgY, tileImgWidth, tileImgHeight // 目标画布区域（保持实际位置和比例）
+        0, 0, imgWidth, imgHeight,
+        -tileImgWidth / 2, -tileImgHeight / 2,
+        tileImgWidth, tileImgHeight
       );
       );
 
 
-      // 恢复画布旋转
-      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      // 恢复画布状态
+      ctx.restore();
 
 
       // 将画布内容转换为Blob对象
       // 将画布内容转换为Blob对象
       canvas.toBlob((blob) => {
       canvas.toBlob((blob) => {