不用钱！纯前端离线瓦片地图下载

详细代码讲解请看掘金博客https://juejin.cn/spost/7671834850672427017

功能

• 导入导出配置
• 手动绘制范围
• 获取当前地图范围
• 绘制行政区域,获取行政区域范围
• 自定义投影，投影配置，原点，lods配置
• 下载地图瓦片，分包下载地图瓦片
• 下载当前截图
• 下载行政区图
• 下载行政区域瓦片
• 拆分下载大缩放层级行政区域瓦片
• 导入geojson并绘制
• 自定义GeoJson数据转瓦片底图
• 瓦片转换坐标系

操作选项说明

• 导入配置，导出配置: 左侧配置栏设置会自动缓存本地localstorage,如果需要切换多种不同的地图瓦片配置，可以先导出配置json,再导入
• 重绘地图: 当瓦片地址，瓦片大小，最大最小层级等值改变时需要重绘地图才能看到配置修改后地图的样子
• 恢复默认配置：默认是高德地图瓦片地图的地址相关配置
• 手动绘制范围：左点击地图新增或更新矩形范围的第一个点，右点击地图新增或更新矩形范围的第二个点
• 下载当前截图：下载当前canvas地图显示的地图
• 获取当前地图范围：将当前canvas地图的范围设置为矩形范围
• 下载地图瓦片：需先配置下载范围,下载当前地图的瓦片到zip，可配置分包下载，常用的瓦片地图选择这个
• 绘制行政区域： 绘制选择的行政区域的边界，可选子区域，数据来源于DataV.GeoAtlas地理小工具系列
• 获取行政区域范围：根据绘制的行政区域范围，设置为当前要下载的地图范围
• 下载行政区域图：需先设置并绘制行政区，瓦片图合成一张大的canvas地图截取出行政区域内的瓦片内容，下载不同层级行政区域大图。
• 下载行政区域瓦片：需先设置并绘制行政区，瓦片图合成一张大的canvas地图截取出行政区域内的瓦片内容，然后根据瓦片索引分别截取出新的瓦片，只有行政区域内的有内容，会有空白的瓦片，下载不同层级行政区域内的瓦片。
• 导入GeoJson数据,绘制GeoJson数据：导入geojson，配置样式,绘制geojson数据，可以在地图上查看效果。

操作步骤：

1. 配置瓦片信息
2. 手动绘制范围，或者选择行政区，绘制行政区，获取行政区范围
3. 下载地图瓦片（可开启分包下载）

验证瓦片demo

可以将瓦片解压到放到demo文件夹下，开启liverServer,即可通过leaflet或openlayer验证瓦片是否正确

瓦片修改样式脚本

详细讲解请看掘金博客https://juejin.cn/spost/7684800289061404698

针对天地图的，改色矢量瓦片和标注瓦片，将其合并成新的瓦片

操作步骤：

1. 把矢量瓦片放在changeTiles/矢量底图文件夹下，执行脚本image-tile.js，处理后的瓦片会放在换色底图文件夹
2. 把标注瓦片放在changeTiles/矢量底图文件夹下，执行脚本image-text.js，处理后的瓦片会放在换色标注文件夹
3. 执行脚本image-merge.js，合并后的瓦片会放在叠加瓦片文件夹

其他来源的瓦片也是一样换色逻辑的，建议瓦片换色不要直接覆盖原文件，因为颜色配置可能需要一点点调整的。

参考

• jszip-https://stuk.github.io/jszip/
• leaflet- https://github.com/Leaflet/Leaflet
• proj4-https://proj4js.org/
• proj4leaflet-https://kartena.github.io/Proj4Leaflet/
• 天地图-https://www.tianditu.gov.cn/
• 高德地图-https://lbs.amap.com/api/javascript-api-v2/summary
• sharp-https://github.com/lovell/sharp