Hooke / map-demo

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
5f091e80 1 parent b1921d45

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

Inline Side-by-side
Showing 4 changed files with 110 additions and 7 deletions
......@@ -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",
......
/*
* @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`);
});
}
......
<!--
* @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;
}
......
......@@ -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=
......