webgis —— 为瓦片构建缓存

前言

了解 webgis 或接触过 webgis 相关应用的童鞋应该知道，webgis 应用有个特点，加载影像地图或者矢量地图是刚需。

相信对于国内的 gis 行业的从业者来说，天地图应该不是一个陌生的存在吧。

对比其他商业地图（高德、百度、腾讯地图等）而言，天地图有几个明显的优点：

1. 它是官方出品的地图，权威性较高。
2. 它更新比较及时，每年都会对部分区域的影像进行更新。
3. 国内热门地方，影像精度较高，达到亚米级别。
4. 坐标系采用 wgs84 坐标系，无偏差，无加密。

至于缺点嘛，这里就不做过多的介绍了，用过的童鞋自然会明白。

当然，其实这篇文章的出发点，解决的就是天地图的一大缺点——服务不稳定。

这不，最近很长一段时间，天地图的服务都不给力，经常加载极其缓慢，还动不动会出现响应超时的情况。

如果只是自己用用倒也没啥，但是被老板和客户碰到，就闹心了，接受到过很多次反馈。

虽然，这问题有外部的原因，也并不全是我们自己能解决的，但是有没有什么方法，可以作出一定程度的优化呢？

不然，这个问题，极其的影响 webgis 应用的使用体验。

毕竟，公司的业务都或多或少和 webgis 相关。

思考

对于这种问题，其实业界通常的做法，就是加缓存。

就是，经典的——用空间换时间。

当然，对于我们遇到的这个问题来说，其实有两种解决的思路。

一种是，后端做缓存；一种是，前端做缓存。

当然这两种方案，其实都是针对当前问题所作出的妥协下的无奈。

我们知道，一般而言，无论是使用 cesium 还是 openlayers 等 webgis 框架，直接目的都是为了能够在网页上直接使用地理空间数据。

而地理空间数据有个特点，就是空间范围大，时间跨度长，这一特点导致地理空间数据的数据量量普遍都很大。

所以，虽然公司是专门做 gis 方面应用的，也会定期制作发布一些区域的影像图，但是像天地图这种全球性底图，我们也很难做到自己发布一份来使用。

至于其中原因，说起来很简单，因为做这个事情的成本和收益不对等。

况且天地图服务本身质量不错，又可以免费使用，为什么要吃力不讨好的另起炉灶呢？

后端缓存

如果要采用后端缓存的方案，直接用 nginx 做转发即可。

我们知道，对于天地图而言，这是一个瓦片的请求地址（替换成自己的 token 即可）：

https://t2.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix=12&TileRow=1665&TileCol=3413&style=default&format=tiles&tk=你的token

对于不同的瓦片而言，请求变化的只是请求地址里面的几个参数：

1. TileMatrix——层级数
2. TileRow——行号
3. TileCol——列号

所以，了解了这些以后，再稍微研究下 nginx 的缓存策略，想要实现后端对天地图的缓存就很简单了。

在这里，我只做一下简单的介绍，不作详细的赘述，有兴趣的童鞋可以自行研究一下。

前端缓存

有的同学可能会说，有了后端缓存的方案，为什么要研究前端缓存呢？

不要着急，让我们先缕一缕，做个分析对比。

后端缓存，实质上是把天地图服务器上的瓦片资源，缓存到我们自己的服务器上，会增加我们自己服务器的存储和带宽；但是它有个优点是，一旦有了缓存，以后高频访问的地方，就可以不依赖天地图的服务了，并且自己所有的项目都能用。

但是前端缓存也有自己的优势，不占用自己服务器的存储和带宽；一旦有了缓存以后，能支持离线加载，速度更快；每个用户都有自己的小型缓存服务，不会相互影像。

当然前端缓存，也不是没有缺点的，其中一个重要的影响就是，会增加代码的复杂度，对开发人员的要求较高；效果比不上浏览器的默认缓存，稍微会影响一些加载效率；对用户电脑的要求较高。

我们姑且不评价采用哪种方式更好，单纯从解决问题的角度出发，来探讨下如何增加一层前端缓存。

我们知道，用 Window.localStorage - Web APIs | MDN 或者 Window.sessionStorage - Web APIs | MDN 肯定是不行，因为它们的容量都有限制，达不到我们的使用要求。

Web SQL 基本已经处于废弃状态，因此，基本上可以确定，我们能选用的方案就是 Using IndexedDB - Web APIs | MDN。

当然 IndexedDB 原生的 api 写起来比较复杂，可以用已经封装好的框架，帮助我们开发，可以参考 mdn 页面的推荐：Using IndexedDB - Web APIs | MDN。

当然，这篇文章，不太会专注于怎么把数据存储在 IndexedDB 里面，如果你不了解而刚好又感兴趣的话，可以翻翻博主以前的文章，相信会有一些启发。

既然是与 webgis 相关的文章，那么我们当然要从 cesium、openlayers 这些 webgis 常用的框架入手，介绍，如何在这些框架里面实现瓦片的前端缓存。

openlayers

对于 openlayers 来说，想要实现该功能很简单。

加载 wmts 瓦片地图的时候 ，有一个选项 tileLoadFunction ，支持传入一个自定义的加载函数。

OpenLayers v7.1.0 API - Class: WMTS

我们先来看看，该函数的默认值：

function