「GIS思考」百度高德地图抓取底图的 2 个思路

最近又进入一段时间的加班，突然有个学设计的学弟来问我说，能不能帮他把地图上的学校背景给下载下来，用来做一个新生开学地图指引。我说这个需求简单啊，找个地图下载器就 OK 了，但这个学弟有一股打破砂锅问到底的精神，非要问我这些下载器是怎么实现的？我刚想说我不知道，但一想怎么说也是个学 GIS 出身的，这种回答有点掉面，那我就瞎猜了 2 种思路，把学弟打发了，但仔细想想可能我的思路也是不对的，于是今天写一个文章，也许大家会有新的答案。

要的 GIS 底图

首先看看学弟要的底图，不是那种卫星图。而是这种：

上面只是一个示意图，学弟要的放的最大的那种。

思路一：大屏幕法

那既然要 zoom 到最大的级别的图，我们假想一下有一台分辨率超级高的屏幕，这个屏幕可以显示出整个学校的最大级别图。然后我们找个截图工具喀嚓一下子就可以了。

这是理想情况，但现实是很难找到这样的大屏幕，那有没有其他方法？也有，我们观察百度和高德地图，你会发现它的地图是画在一个 canvas 标签里的，稍微知道点前端知识应该都知道什么套路了吧。

这里可以设置一个宽和高，如果我们把这个数值设置大一点，比如 2W，那是不是就可以显示出整个底图了呢？只不过会出现滚动条，我们找个支持滚动截屏的工具喀嚓一下就好。

但有一个问题，这个数值不能设置无限大，大了你的显卡受不了。那有没有其他方法，总的不行，我们就分。

思路二：分而治之

刚刚我们说一下子显示不了那么多数据，那我们换个思路，把我们的底图像切蛋糕一样分成一块块的，分别截图，最后再把生成的小图合并成一张大图就可以了。

举例来说，就是当前可见区域你截图一下，然后拖动地图，再截图一下。当然实际操作中肯定不会手动动移动图层，高德和百度地图的 JS API 都有这种操作，另外合并图片也不必手动去启动 PS，这种拼接的工具有好多。

2 种方法对比

我们看思路一，好像有点傻，但如果范围小，其实这种方法非常实用，并且还有几个优势，一是适用于 2.5 维和 3 维地图视角，二是不会出现标注重叠，三是不需要单独申请API Key。

思路二看起来通用一些，适用于大范围，但也有硬伤，我们需要申请开发者，把 label 给屏蔽掉。当然申请了开发者也有另外的好处，比如我们可以使用自定义的底图。不过小编在实践的过程中也遇到过 Key 被高德封掉的场景，至今也没找到其他解决方案。

下图是使用思路二抓取的一张底图，有没有小伙伴可以看出这是哪里？

如果有其他思路，还希望小伙伴指出，谢谢！