在 Openlayers 的当前视口之外请求和缓存 WMTS/平铺的 WMS 切片答案

【问题标题】：Requesting and caching WMTS/ tiled WMS tiles outside of the current viewport in Openlayers在 Openlayers 的当前视口之外请求和缓存 WMTS/平铺的 WMS 切片
【发布时间】：2020-12-22 14:49:47
【问题描述】：

我正在开发一个需要同时请求多个 WMTS/平铺 WMS 图层的应用程序。我知道这总是会产生性能开销，但执行此操作的能力是应用程序功能的核心。我正在寻找提高性能的方法，我想尝试的一种方法是在当前视口范围之外预加载和缓存切片。我的想法是，应用程序可以利用用户静止的时间来准备周围的瓦片，这些瓦片可以在地图移动时从缓存中呈现。

默认情况下，Openlayers 似乎在较小程度上对 WMTS 和平铺 WMS 图层执行此操作，但我想控制这种情况发生的程度。我了解对于 WMS 图层，ratio 和 buffer 参数可用于操纵用于请求 WMS 图层的 BBOX 的大小，但无法找到有关允许 WMTS/平铺发生这种情况的参数的任何信息WMS 图层。 Openlayers 中是否存在开箱即用的功能？如果没有，是否可以向请求提供自定义图块索引（即从视口 + 缓冲区导出），或者这是否需要完全自定义的东西来发出请求？谢谢。

【问题讨论】：

标签： openlayers

【解决方案1】：

您可以使用更大的视口，但隐藏溢出并重新定位控件，使其显示为所需的大小。它会影响 fit() 等操作的工作方式。

<!doctype html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
  <style>
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .map {
        position: absolute;
        width: 200%;
        height: 200%;
        left: -50%;
        top: -50%;
    }
    .map div.ol-zoom {
        left: calc(25% + .5em);
        top: calc(25% + .5em);
    }
    .map div.ol-attribution {
        right: calc(25% + .5em);
        bottom: calc(25% + .5em);
    }
    .map div.ol-rotate {
        right: calc(25% + .5em);
        top: calc(25% + .5em);
    }
  </style>
  <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
  <title>OpenLayers View on View example</title>
</head>

<body>
  <div id="map" class="map"></div>
  <script type="text/javascript">

    var source = new ol.source.OSM();

    var map = new ol.Map({
        target: 'map',
        layers: [new ol.layer.Tile({ source: source })],
        view: new ol.View({
            center: ol.proj.fromLonLat([2.3442, 48.8635]),
            zoom: 10
        })
    });

  </script>
</body>

</html>

【讨论】：

谢谢，这最终成为了一个很好的解决方案。我喜欢它的工作原理与源类型无关，并且在我只是使用地图查看图像的情况下工作正常