经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 大数据/云/AI » 人工智能基础 » 查看文章
一个在线下载地图XYZ瓦片的网站实现
来源:cnblogs  作者:当时明月在曾照彩云归  时间:2024/5/6 16:18:45  对本文有异议

1. 什么是XYZ瓦片

XYZ瓦片是一种在线地图数据格式,常见的地图底图如Google、OpenStreetMap 等互联网的瓦片地图服务,都是XYZ瓦片,严格来说是ZXY规范的地图瓦片

ZXY规范的地图瓦片规则如下:将地图全幅显示时的图片从左上角开始,往下和往右进行切割,切割的大小默认为 256*256 像素,左上角的格网行号为 0,列号为 0,往下和往右依次递增,如下图所示:

img

从整体来说,XYZ瓦片数据结构是一种影像金字塔,如下图所示:

image

对于用户端的软件来说,所谓浏览XYZ格式的地图,就是根据当前的缩放等级和屏幕显示的地理范围,去服务端加载对应的XYZ瓦片(通常是PNG图片)

2. XYZ瓦片与经纬度的计算以及原理

首先给出经纬度与XYZ行列号之间的计算公式:

Latlon to tile.png

现在解释一下原理

下面是一张OpenStreetMap在zoom等级为2时的瓦片示意图

File:Tiled web map numbering.png

z 是当前的瓦片等级,就是缩放等级,由上面的图可以看出:z 等级时,共有\(2^z\)个瓦片,x范围为0-\(2^z-1\),y范围也是0-\(2^z-1\)

首先 x 的计算很简单:

  • 目的:将经度从-180度到180度,映射到0到\(2^z\)之间的整数列号上
  • 过程:先将经度加180度,使其从0到360度,然后除以360(归一化)再乘以\(2^z\)得到行号,最后向下取整数部分,得到最终的行号

y 的计算就复杂多了:

  • 目的:将纬度从-90度到90度,映射到0到\(2^z\)之间的整数行号上

  • 存在的问题:纬度分布不均匀,XYZ瓦片试图将地图展开为一个正方形(参考上图,本质上就是Web墨卡托投影),然而纬度是中间(赤道)长两极短,如果只是像 x 一样简单的映射,会导致两极的紧凑,赤道附近稀疏

  • 解决方案:将纬度通过一种映射,使其能均匀一点,然后就采用了下面的函数

    \[y=\frac{\left(1-\ln(\tan(x)+1/\cos(x))/\pi\right)}{2} \]

    这个函数图像如下图所示:

image-20240426030304580

  • 过程:在采取上面的这个纬度的映射函数以后(归一化),再乘以\(2^z\),最后向下取整数部分,得到最终的列号

3. 实现XYZ瓦片的在线下载

3.1 技术选型

Vue3 + element-plus + jszip + OpenLayers

此项目在UI部分基于项目:xiaolidan00/offline-map-download: 纯前端离线瓦片地图下载 (github.com)的UI进行修改

3.2 核心代码

  1. function lon2tile(lon, zoom) {
  2. return (Math.floor((lon + 180) / 360 * Math.pow(2, zoom)));
  3. }
  4. function lat2tile(lat, zoom) {
  5. return (Math.floor((1 - Math.log(Math.tan(lat * Math.PI / 180) + 1 / Math.cos(lat * Math.PI / 180)) / Math.PI) / 2 * Math.pow(2, zoom)));
  6. }
  7. function download() {
  8. const latlngMin = toLonLat([rect.value[0], rect.value[3]]);
  9. const latlngMax = toLonLat([rect.value[2], rect.value[1]]);
  10. const list = [];
  11. for (let z = 0; z < 20; z++) {
  12. const xMin = lon2tile(latlngMin[0], z);
  13. const yMin = lat2tile(latlngMin[1], z);
  14. const xMax = lon2tile(latlngMax[0], z);
  15. const yMax = lat2tile(latlngMax[1], z);
  16. if (zoomMap.value[z]) {
  17. for (let x = xMin; x <= xMax; x++) {
  18. for (let y = yMin; y <= yMax; y++) {
  19. list.push({ x, y, z });
  20. }
  21. }
  22. }
  23. }
  24. downloadTiles(list);
  25. }
  26. async function downloadTiles(list) {
  27. isLoading.value = true;
  28. const total = list.length;
  29. let count = 0;
  30. let zip = new JSZip();
  31. for (let i = 0; i < list.length; i += 6) {
  32. let promises = [];
  33. if (i + 6 > list.length) {
  34. promises = list.slice(i, list.length).map(async (item) => {
  35. const blob = await downloadTile(item.x, item.y, item.z)
  36. zip.file(`${item.z}/${item.y}/${item.x}.png`, blob);
  37. count++;
  38. process.value = ((count / total) * 100).toFixed(2);
  39. });
  40. } else {
  41. promises = list.slice(i, i + 6).map(async (item) => {
  42. const blob = await downloadTile(item.x, item.y, item.z)
  43. zip.file(`${item.z}/${item.y}/${item.x}.png`, blob);
  44. count++;
  45. process.value = ((count / total) * 100).toFixed(2);
  46. });
  47. }
  48. await Promise.all(promises);
  49. }
  50. }
  51. function downloadTile(x, y, z) {
  52. return new Promise((resolve, reject) => {
  53. fetch(url.value.replace('{x}', x).replace('{y}', y).replace('{z}', z))
  54. .then((res) => res.blob())
  55. .then((blob) => {
  56. resolve(blob);
  57. })
  58. .catch((err) => {
  59. reject(err);
  60. });
  61. });
  62. }

3.3 网站部署

使用GitHub Actions和GitHub Pages进行打包部署此Vue3项目

具体的步骤可参考:使用GitHub Actions和GitHub pages实现前端项目的自动打包部署 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com)

此项目的GitHub地址为:zhnny/online-map-download: 在线下载XYZ地图瓦片 (github.com)

此项目的在线地址为:在线瓦片地图下载

3.4 网站使用

打开网站,输入XYZ瓦片的地址(默认的是ArcGIS的在线遥感影像),然后点击加载瓦片

image-20240430131459052

点击“划范围”,然后开始绘制多边形,双击完成绘制,自动计算瓦片范围(红色矩形部分)

image-20240430131526197

点击“下载”,打开下载信息界面,勾选需要下载的级别

image-20240430131556040

点击下载,弹出信息提示框

image-20240430131619333

开始下载,等待下载完成

image-20240430131659188

下载完成,打开压缩包查看瓦片

image-20240430131732990

4. 参考资料

[1] xiaolidan00/offline-map-download: 纯前端离线瓦片地图下载 (github.com)

[2] 使用GitHub Actions和GitHub pages实现前端项目的自动打包部署 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com)

[3] GIS中XYZ瓦片的加载流程解析与实现 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com)

[4] 使用JSZip实现在浏览器中操作文件与文件夹 - 当时明月在曾照彩云归 - 博客园 (cnblogs.com)

[5] 不用钱!纯前端打包下载离线瓦片地图 - 掘金 (juejin.cn)

原文链接:https://www.cnblogs.com/jiujiubashiyi/p/18167871

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号