生成瓦片图优化，直接生成压缩包下载

hookehuyr
Commit 5f091e80ccfa3666d27eca2ded6e4f75c49307a0 5f091e80 1 parent b1921d45
Showing 4 changed files with 110 additions and 7 deletions
package.json
src/utils/TileCutter.js
src/views/mapCutter.vue
yarn.lock
--- a/package.json
View file @5f091e8
+++ b/package.json
View file @5f091e8
@@ -42,12 +42,14 @@
     "dayjs": "^1.11.3",
     "default-passive-events": "^2.0.0",
     "element-plus": "^2.9.3",
+    "file-saver": "^2.0.5",
     "font-awesome": "^4.7.0",
     "global": "^4.4.0",
     "html-to-json-parser": "^1.1.0",
     "html2canvas": "^1.4.1",
     "jquery": "^3.6.0",
     "js-cookie": "^3.0.1",
+    "jszip": "^3.10.1",
     "lodash": "^4.17.21",
     "mockjs": "^1.1.0",
     "moment": "^2.29.3",
--- a/src/utils/TileCutter.js
View file @5f091e8
+++ b/src/utils/TileCutter.js
View file @5f091e8
 /*
  * @Date: 2025-01-22 11:45:30
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-01-23 16:38:00
+ * @LastEditTime: 2025-01-24 16:56:06
  * @FilePath: /map-demo/src/utils/TileCutter.js
  * @Description: 文件描述
  */
+import JSZip from "jszip";
+import { saveAs } from "file-saver";
+
 const tileSize = 512;
 export function TileCutter(imageURL, bounds, zoomLevel) {
@@ -58,6 +61,10 @@ function sliceImageToTiles(image, bounds, zoomLevel) {
   ctx.scale(scaleFactor, scaleFactor);
+  const zip = new JSZip();  // 创建一个 JSZip 实例，用来打包所有瓦片
+
+  let tileIndex = 0;  // 瓦片索引，用来给每个瓦片命名
+
   for (let x = 0; x < cols; x++) {
       for (let y = 0; y < rows; y++) {
           ctx.clearRect(0, 0, tileSize, tileSize);
@@ -76,7 +83,16 @@ function sliceImageToTiles(image, bounds, zoomLevel) {
               const tileX = tileStartX + x;
               const tileY = tileStartY + y;
               // console.warn(`保存瓦片: ${tileX}_${tileY}_${zoomLevel}.png`);
-              saveTile(blob, `${tileX}_${tileY}_${zoomLevel}.png`);
+              // saveTile(blob, `${tileX}_${tileY}_${zoomLevel}.png`);
+
+              // 使用 JSZip 将每个瓦片添加到压缩包中
+              zip.file(`${tileX}_${tileY}_${zoomLevel}.png`, blob);
+              tileIndex++;
+
+              // 如果所有瓦片都处理完，生成并下载压缩包
+              if (tileIndex === cols * rows) {
+                  generateAndDownloadZip(zip, zoomLevel);
+              }
           }, "image/png", 1.0);
       }
   }
@@ -100,3 +116,11 @@ function saveTile(blob, filename) {
   link.click();
   document.body.removeChild(link);
 }
+
+// 生成并下载压缩包
+function generateAndDownloadZip(zip, zoomLevel) {
+  zip.generateAsync({ type: "blob" }).then((content) => {
+      // 使用 FileSaver.js 下载压缩包
+      saveAs(content, `${zoomLevel}级瓦片切片包.zip`);
+  });
+}
--- a/src/views/mapCutter.vue
View file @5f091e8
+++ b/src/views/mapCutter.vue
View file @5f091e8
 <!--
  * @Date: 2025-01-22 11:40:12
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-01-23 16:32:53
+ * @LastEditTime: 2025-01-24 16:57:47
  * @FilePath: /map-demo/src/views/mapCutter.vue
  * @Description: 文件描述
 -->
@@ -249,12 +249,12 @@ const onZoomChange = (value) => { // 调整地图图层
 const onLBRangeBlur = () => {
   const str = map_left_bottom_range.value;
-  const formattedArray = str.split(',').map(Number);
+  const formattedArray = str?.split(',').map(Number);
   map_left_bottom_range.value = formattedArray;
 }
 const onRTRangeBlur = () => {
   const str = map_right_top_range.value;
-  const formattedArray = str.split(',').map(Number);
+  const formattedArray = str?.split(',').map(Number);
   map_right_top_range.value = formattedArray;
 }
--- a/yarn.lock
View file @5f091e8
+++ b/yarn.lock
View file @5f091e8
@@ -1050,6 +1050,11 @@ core-util-is@1.0.2:
   resolved "https://mirrors.cloud.tencent.com/npm/core-util-is/-/core-util-is-1.0.2.tgz"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://mirrors.cloud.tencent.com/npm/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
 cross-spawn@^7.0.0:
   version "7.0.3"
   resolved "https://mirrors.cloud.tencent.com/npm/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -1575,6 +1580,11 @@ figures@^3.2.0:
   dependencies:
     escape-string-regexp "^1.0.5"
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://mirrors.cloud.tencent.com/npm/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
 fill-range@^7.0.1:
   version "7.0.1"
   resolved "https://mirrors.cloud.tencent.com/npm/fill-range/-/fill-range-7.0.1.tgz"
@@ -1850,6 +1860,11 @@ image-size@~0.5.0:
   resolved "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz"
   integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://mirrors.cloud.tencent.com/npm/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
+
 indent-string@^4.0.0:
   version "4.0.0"
   resolved "https://mirrors.cloud.tencent.com/npm/indent-string/-/indent-string-4.0.0.tgz"
@@ -1868,7 +1883,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
-inherits@2:
+inherits@2, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -1969,6 +1984,11 @@ is-what@^3.14.1:
   resolved "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz"
   integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
+isarray@~1.0.0:
+  version "1.0.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
+  integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://mirrors.cloud.tencent.com/npm/isexe/-/isexe-2.0.0.tgz"
@@ -2048,6 +2068,16 @@ jsprim@^2.0.2:
     json-schema "0.4.0"
     verror "1.10.0"
+jszip@^3.10.1:
+  version "3.10.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
+  integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
+  dependencies:
+    lie "~3.3.0"
+    pako "~1.0.2"
+    readable-stream "~2.3.6"
+    setimmediate "^1.0.5"
+
 keycode@2.2.0:
   version "2.2.0"
   resolved "https://mirrors.cloud.tencent.com/npm/keycode/-/keycode-2.2.0.tgz"
@@ -2082,6 +2112,13 @@ less@^4.1.2:
     needle "^2.5.2"
     source-map "~0.6.0"
+lie@~3.3.0:
+  version "3.3.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/lie/-/lie-3.3.0.tgz#dcf82dee545f46074daf200c7c1c5a08e0f40f6a"
+  integrity sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==
+  dependencies:
+    immediate "~3.0.5"
+
 listr2@^3.8.3:
   version "3.14.0"
   resolved "https://mirrors.cloud.tencent.com/npm/listr2/-/listr2-3.14.0.tgz"
@@ -2500,6 +2537,11 @@ p-map@^4.0.0:
   dependencies:
     aggregate-error "^3.0.0"
+pako@~1.0.2:
+  version "1.0.11"
+  resolved "https://mirrors.cloud.tencent.com/npm/pako/-/pako-1.0.11.tgz#6c9599d340d54dfd3946380252a35705a6b992bf"
+  integrity sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==
+
 param-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz"
@@ -2661,6 +2703,11 @@ pretty-bytes@^5.6.0:
   resolved "https://mirrors.cloud.tencent.com/npm/pretty-bytes/-/pretty-bytes-5.6.0.tgz"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
+process-nextick-args@~2.0.0:
+  version "2.0.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
+
 process@^0.11.10:
   version "0.11.10"
   resolved "https://mirrors.cloud.tencent.com/npm/process/-/process-0.11.10.tgz"
@@ -2713,6 +2760,19 @@ randombytes@^2.1.0:
   dependencies:
     safe-buffer "^5.1.0"
+readable-stream@~2.3.6:
+  version "2.3.8"
+  resolved "https://mirrors.cloud.tencent.com/npm/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
+  integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.3"
+    isarray "~1.0.0"
+    process-nextick-args "~2.0.0"
+    safe-buffer "~5.1.1"
+    string_decoder "~1.1.1"
+    util-deprecate "~1.0.1"
+
 readdirp@~3.6.0:
   version "3.6.0"
   resolved "https://mirrors.cloud.tencent.com/npm/readdirp/-/readdirp-3.6.0.tgz"
@@ -2809,6 +2869,11 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.2:
   resolved "https://mirrors.cloud.tencent.com/npm/safe-buffer/-/safe-buffer-5.2.1.tgz"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+  version "5.1.2"
+  resolved "https://mirrors.cloud.tencent.com/npm/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
+  integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
+
 safe-json-parse@4.0.0:
   version "4.0.0"
   resolved "https://mirrors.cloud.tencent.com/npm/safe-json-parse/-/safe-json-parse-4.0.0.tgz"
@@ -2859,6 +2924,11 @@ serialize-javascript@6.0.0:
   dependencies:
     randombytes "^2.1.0"
+setimmediate@^1.0.5:
+  version "1.0.5"
+  resolved "https://mirrors.cloud.tencent.com/npm/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
+  integrity sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://mirrors.cloud.tencent.com/npm/shebang-command/-/shebang-command-2.0.0.tgz"
@@ -2960,6 +3030,13 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
+string_decoder@~1.1.1:
+  version "1.1.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
+  integrity sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==
+  dependencies:
+    safe-buffer "~5.1.0"
+
 strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://mirrors.cloud.tencent.com/npm/strip-ansi/-/strip-ansi-6.0.1.tgz"
@@ -3259,7 +3336,7 @@ url-toolkit@^2.2.1:
   resolved "https://mirrors.cloud.tencent.com/npm/url-toolkit/-/url-toolkit-2.2.5.tgz"
   integrity sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==
-util-deprecate@^1.0.2:
+util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://mirrors.cloud.tencent.com/npm/util-deprecate/-/util-deprecate-1.0.2.tgz"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=