openlayer根据服务器返回状态码，替换使用本地图片

一、问题产生

使用openlayer加载自己公司的wmts服务，要求根据用户权限、瓦片存在与否等进行直观的瓦片替换。例如某张瓦片不存在，则替换该瓦片为404的一张图片，某个区域用户无权限查看，则替换为无权限（401）图片（如下图）；

二、问题分析&解决

首先贴上加载服务的代码。关于tileGrid和projection等属性与本人影像服务器计算有关，也与本博客无关，故不细说。

在这里，我们使用的是ol.layer.tile类来加载瓦片，瓦片行列号计算方式满足wmts标准。故采用ol.source.WMTS来进行加载。

let wmtsLayer = new ol.layer.Tile({
    source: new ol.source.WMTS({
        url: url,
        projection: projection, //数据的投影坐标系
        tileGrid: tileGrid,
        format: "image/png",
        crossOrigin: 'anonymous'
    })
});

map.addLayer(wmtsLayer)

在加载服务之后，根据控制台的ajax请求，定位到瓦片请求的具体代码，找到源文件TileImage.js中的tileLoadFunction。查阅api也可以得到。

该类如下定义：

super({
//--其余代码
   tileLoadFunction ?
        options.tileLoadFunction : defaultTileLoadFunction,
//--其余代码
 });

找到defaultTileLoadFunction定义：

这里我们发现，最终生成的wmts格式的url，被赋值给了一个Image对象。我们的思路就有了。于是我们跟踪这个tileLoadFunction