webgis —— 为瓦片构建缓存

前言

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

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

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

它是官方出品的地图，权威性较高。
它更新比较及时，每年都会对部分区域的影像进行更新。
国内热门地方，影像精度较高，达到亚米级别。
坐标系采用 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

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

TileMatrix——层级数
TileRow——行号
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(imageTile, src) {imageTile.getImage().src = src;
};

分析可知，其主要干的事情就是给目标瓦片对象赋予 src 值。

而对于某个瓦片的链接来说，我们可以直接从 url 参数中分析出来所有我们需要的信息，因此我们直接在链接上下文章即可。

比如我们在使用 openlayers 加载天地图时候，该函数的第二个参数 src 可能是下面的值：

https://t2.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL=49&TILEROW=28&TILEMATRIX=6&tk=你的token

那么我们就可以直接用正则或者 URLSearchParams - Web API 接口参考 | MDN 对 url 进行处理，得到我们想要的层级、行列号、图层名等信息，作为存储的唯一标识。

接下来，我们需要通过 ajax 获取到图像的二进制数据，然后通过 URL.createObjectURL() - Web APIs | MDN 将二进制文件转成一个链接，直接赋值给 imageTile.getImage().src 即可。

关键代码如下：

const tileLoadFunction = async(imageTile, src) => {// 获取 keyconst cname = this._getKeyName(src);// 查询下缓存内是否有该数据const data = await getOneByName(cname);// 拿到目标 image 对象const image = imageTile.getImage();image.onload = function onload() {// 图片加载完，释放一个URL资源.window.URL.revokeObjectURL(this.src);};// 如果存在缓存，用缓存数据if (data) {image.src = URL.createObjectURL(data.blob);} else {// 如果不存在缓存，通过 fetch 加载数据const res = await fetch(src);const newBlob = await res.blob();image.src = URL.createObjectURL(newBlob);// 加入缓存addOneImage({name: cname,blob: newBlob});}
}

cesium

要想在 cesium 中使用前端缓存，实质上和在 openlayers 实际上大同小异。

但是比较棘手的是，cesium 并未直接提供改写瓦片请求的接口，因此我们需要通过重载源码的方式，来实现我们的需求。

我们知道，在 cesium 的架构中，ImageryProvider 是所有图层的容器对象，每个 layer 必定会对应着一个该对象的实例。

分析 cesium 的源码可知， ImageryProvider 对象的 loadImage 方法，是图层中加载每个瓦片的方法。

因此，我们在 loadImage 上下手即可：

// 将 ImageryProvider 对象上的 loadImage 方法重命名
ImageryProvider.loadImage2 = ImageryProvider.loadImage;
// 重载 loadImage 方法
ImageryProvider.loadImage = function loadImage(imageryProvider, url) {// 符合我们需求的，调用重载的方法if (imageryProvider instanceof WebMapTileServiceImageryProvider) {// 返回 promisereturn new Promise((resolve) => {// 获取唯一的 keyconst {layer,tilecol,tilematrix,tilerow,} = url.queryParameters;const cname = `${layer} ${tilematrix} ${tilerow} ${tilecol}`;// 从缓存里获取数据getOneByName(cname).then(async (data) => {// 存在数据if (data) {const imgUrl = URL.createObjectURL(data.blob);const img = new Image();img.src = imgUrl;img.crossOrigin = 'Anonymous';img.onload = () => {// 直接将图片返回resolve(img);};} else {// 不存在数据const resource = Resource.createIfNeeded(url);const newBlob = await resource.fetchImage({preferBlob: true,preferImageBitmap: false,flipY: true,});// 加入缓存addOneImage({name: cname,blob: newBlob.blob});// 将 fetchImage 获取到的对象返回resolve(newBlob);}});});}// 调用默认的方法return ImageryProvider.loadImage2.call(this, imageryProvider, url);
};

后记

就像文章前面所说的那样，无论是前端缓存还是后端缓存，都只是一种辅助措施，一种多方考量下的无奈之举，两者都有自己的缺点和优势。

不过话又说回来，web 应用作手动缓存，给人一种多此一举的感觉。

毕竟很多情况下，浏览器为了加快网页的访问速度，已经尽可能的做了很多事情。

而通常情况下，效率最高的方式，肯定是去遵循浏览器的默认缓存策略，从而使得我们的应用达到最好的使用效果。

奇淫巧计有一定的帮助，但是终究作用还是有限，解决问题的同时，势必会引发新的问题。