下载离线瓦片地图

项目：参照台风路径搭建一个本地的天气网页

需求：首先需要下载与网站相同的瓦片地图

通过chrome开发者工具可以看到瓦片地图的url：https://hdcloud.lytq.com/geoq_tile/{z}/{y}/{x}.png

其中，z表示缩放等级，x和y是瓦片的坐标（为什么是这个顺序，因为我试了/{z}/{x}/{y}拼出来是乱序的），该在线地图服务应该是来自一个国内的公司，所以应该使用的是gcj02坐标系。

幸运地发现了一个下载瓦片地图的神器，感谢这位大佬！我使用的是2024-01-25版本地图下载器: 使用Java开发的地图瓦片图下载工具，支持OpenStreetMap、天地图、谷歌地图、高德地图、腾讯地图、必应地图的XYZ瓦片图下载与合并。

开心的下地图啦。

地图下载器自带一些地图可用，我需要的地图没有，于是添加了一个自定义图层

然后就可以建立下载任务了，选择自己需要的缩放等级：

等待下载完成就好啦。

下载完成后在本地搭建一个简单的http服务器，这里我用的3000端口（记得修改为自己的端口）

#如果安装了node.js
npm install -g http-server #先安装http-server
http-server -p 3000 --cors

#如果没有node.js 用python也可以
python -m http.server 3000

前端地图框架我使用的leaflet，比较轻量，加载地图的代码如下：

var map = L.map('map').setView([30,105],5)
L.tileLayer(''http://127.0.0.1:3000/{z}/{y}/{x}.png', {
        maxZoom: 9,
		minZoom: 3,
		zIndex: 6,
    }).addTo(map);

后面又加上了轮廓线和警戒线，效果如图：