从零开始创建微信小程序手绘地图-使用小程序原生map组件（无需地图商KEY）

使用leafletwx插件传送门：leafletwx插件开发

一、基础知识

1.瓦片地图原理

        瓦片地图（Tile Map）是一种将大范围地理空间数据切割为若干小块（瓦片）的地图呈现技术。每个瓦片通常是正方形图片（如256×256像素），按层级（Zoom Level）、行号、列号组织，通过拼接显示完整地图。这种技术能高效加载和渲染大尺度地图，广泛应用于Web地图服务（如Google Maps、OpenStreetMap）。

        地图数据按预设比例尺分为多个层级（如0-18级），层级越高细节越丰富。每个层级将地图划分为网格，每个网格对应一个瓦片。
        客户端根据当前视图范围和缩放级别，动态请求所需的瓦片，服务器返回对应瓦片数据，前端拼接显示。

知识链接：瓦片地图服务与地图瓦片原理-CSDN博客

2.使用小程序原生map组件实现瓦片地图覆盖的原理

        从上文已知，瓦片地图是使用一定大小（如256*256像素）的正方形图片按照地理信息拼装起来，恰好微信小程序的MapContext中有对应的方法将图片贴在地图上，即addGroundOverlay方法。因此，只需计算出当前屏幕内需要用到哪些瓦片图片，并计算出每个瓦片图片的左上角和右下角的经纬度，即可调用addGroundOverlay方法，将图片贴在地图的准确位置，从而在map组件上实现手绘图层的瓦片地图。

3.zhmap插件说明

插件地址：zhmap

zhmap插件就是基于以上原理实现的map地图插件，它可以在不需要使用地图商key的情况下，实现自定义的瓦片图层覆盖，不必因为一个手绘地图而大大增加使用成本。

二、从零开始创建微信小程序手绘地图

 本章节以高德坐标系为例：

1.将手绘地图图片切成瓦片

使用免费的QGIS进行切片

教程地址：如何将手绘地图切成瓦片

2.将瓦片目录拷贝到服务器的静态目录

使用QGIS切图后，会生成如下这种目录，该目录时典型的WTMS目录，第一层目录是瓦片的zoom层，一般是0~18级，第二层目录时x方向偏移，第三层目录时y方向偏移。

将所有目录拷贝到静态服务器静态文件目录，例如media目录的tiles目录下，假如当前服务器静态文件访问URL为“https://localhost:8000/media/tiles”，对应瓦片的访问路径为“https://localhost:8000/media/tiles/{z}/{x}/{y}.png”，其中“{z}”、“{x}”、“{y}”为占位符，leafletwx框架会计算显示位置对应的瓦片的z/x/y值，将占位符替换掉，获取到指定的瓦片图片。

3.使用zhmap加载切好的瓦片

1、下载zhmap插件开发示例：zhmap示例

2、打开zhmap的使用文档，点击“添加插件”，将插件添加到自己的小程序

3、使用微信开发工具，导入下载后的代码。

4、将导入后的工程APPID改成自己的。

5、依照下图，将高德地图中的URL地址改成自己的“https://localhost:8000/media/tiles/{z}/{x}/{y}.png”。修改bound值，纬经度需要限制在比实际手绘地图左上角、右下角经纬度略小一点的范围。

6、由于addGroundOverlay接口不支持在开发工具中使用，所以在开发工具中看不到瓦片图层，可以使用手机预览，即可看到效果。

三、常见问题

1、手绘地图显示不完整

        因为addGroundOverlay接口如果出现调用图片失败的情况，会导致之后所有的addGroundOverlay接口调用都失败，因此需要确保bound范围内一定有瓦片图片。

        如果手绘图层个显示不完整，需要调整bound的范围，使手绘图层的左上角、右下角经纬度略小于实际地图范围。