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

Question

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

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

Answer 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>

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

Requesting and caching WMTS/ tiled WMS tiles outside of the current viewport in Openlayers

openlayers