OpenLayers瓦片返回404时放大旧瓦片，如何隐藏无数据的Geoportail瓦片

实现方法 #

你只需要修改上层Geoportail瓦片图层的配置即可，改动分为两部分：

• 给瓦片图层添加useInterimTilesOnError: false配置，关闭加载失败时自动展示低层级拉伸临时瓦片的默认逻辑，避免旧瓦片放大显示。
• 给WMTS源自定义tileLoadFunction，捕获瓦片404错误，将加载失败的瓦片设为透明，直接露出底层OSM图层。

修改后的完整代码如下：

layers: [
        new OlTile({
            'title': 'OSM',
            source: new OlOSM()
        }),
        new OlTile({
            // 关闭加载错误时的临时拉伸瓦片
            useInterimTilesOnError: false,
            source : new WMTS({
                          url: 'https://wxs.ign.fr/pratique/geoportail/wmts',
                          layer: 'ORTHOIMAGERY.ORTHOPHOTOS',
                          matrixSet: 'PM',
                          format: 'image/jpeg',
                          projection: 'EPSG:3857',
                          tileGrid: new WMTSTileGrid({
                              origin: [-20037508, 20037508],
                              resolutions: resolutions,
                              matrixIds: matrixIds,
                            }),
                          style: 'normal',
                          // 自定义瓦片加载逻辑处理404
                          tileLoadFunction: function(tile, src) {
                            const img = tile.getImage();
                            img.onload = () => URL.revokeObjectURL(img.src);
                            // 加载失败直接设为空，瓦片透明
                            img.onerror = () => img.src = '';
                            img.src = src;
                          }
                        })
        })
],

如果你的OpenLayers版本在6.0以上，还可以额外给WMTS源添加tileErrorThreshold: 0配置，只要当前视野内存在加载失败的瓦片，就会隐藏整个当前层级的Geoportail图层，全部展示OSM底图。

内容的提问来源于stack exchange，提问作者Jonathan Le Cornichone