在 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 图块

问题描述

1 个解决方案

解决方案1
2 已采纳 2020-09-03 12:01:20

在 Openlayers 中的当前视口之外请求和缓存 WMTS/平铺 WMS 图块

问题描述

1 个解决方案

解决方案1 2 已采纳 2020-09-03 12:01:20

解决方案1
2 已采纳 2020-09-03 12:01:20