当缩放发生变化时，如何通过 OpenLayers 中止未完成的地图图块请求？

Question

我有一个带有 TMS 图层的 OpenLayers 地图。对于每次缩放更改，我的地图都会发出大约 56 个地图图块请求（取决于地图/屏幕尺寸）。如果用户快速放大或缩小，所有这些地图图块请求都会按顺序排队，我的理解是来自 OpenLayers 的地图图块请求不是异步调用的。因此，如果用户快速放大或缩小，最终会出现许多不再需要的地图图块请求，并且需要的地图图块将不会加载，直到发出所有先前的请求。

当缩放更改时，是否有任何方法可以中止待处理的地图图块请求？如果不通过 OpenLayers，是否有某种方法可以中止对特定 URL 的所有待处理请求？

Answer 1

更新到 OpenLayers 2.12 或更高版本，因为自此版本以来，图块队列已得到增强，现在将避免旧请求。引用 OpenLayers 2.12 发行说明：

平铺代码已被彻底修改，因此网格层中的平铺加载是
现在在队列中完成。磁贴队列提供了对磁贴的更多控制
发送到服务器的请求。未处理的瓷砖请求
避免了更多需要（例如，在缩放或平移之后），这
提高性能并减少服务器负载。

Answer 2

当您通过鼠标滚轮定义缩放时，可以使用以下代码来防止加载所有中间缩放级别的图块：

new OpenLayers.Control.Navigation({
    "zoomWheelEnabled": true,
    "mouseWheelOptions": {
        "interval": 250, 
        "cumulative": true
    }
})

Answer 3

对于每次缩放更改，我的地图都会发出大约 56 个地图图块请求（取决于地图/屏幕尺寸）。如果用户快速放大或缩小，所有这些地图图块请求都会排队

您可以按照 janb 的建议避免用户经过的每个缩放级别的请求（他们的代码在最新版本中不再工作）。

默认情况下，MouseWheelZoom 在第一次滚动事件后等待 80 毫秒，然后再执行任何操作 (timeout:80)，并且不允许一次缩放多次单击 (maxDelta:1) ）（文档没有说明为什么要设置这些减速带）。当它等待超时时，不会发生缩放，因此不会加载中间缩放级别。 通过将 maxDelta 设置为更大的值，如果用户在超时期限内滚动超过一次点击，则可以跳过缩放级别。

您可以通过减少80 毫秒，但最终您放弃了足够快的缩放速度以跳过加载缩放级别的机会。

我发现相关的另一个设置是动画持续时间。它堆叠动画而不是等待它们完成，因此（值得庆幸的是）这不会限制用户（许多应用程序让用户在启用交互之前等待动画）。尝试将其设置为 2500 毫秒，然后在动画仍在播放时滚动到地图上的不同点:)。默认值为 250 毫秒，但我发现稍微低一点的值会感觉更灵敏。

根据一些测试，6 个缩放级别大约是我能做到的最精确的缩放级别，而不会出现在我不想要的地方。这对每个人来说可能不是一个好的默认值，但 maxDelta:6 对我来说似乎是一个很好的值。将超时设置为 30 毫秒会导致它无法累积我一次尝试执行的所有缩放操作，因此 40 毫秒对我来说在执行用户要求的操作和避免不必要的等待之间取得了良好的平衡。

let map = new ol.Map({
    interactions: ol.interaction.defaults.defaults({
        mouseWheelZoom: false,
    }).extend([
        new ol.interaction.MouseWheelZoom({
            maxDelta: 6,
            timeout: 40,
            duration: 150,
        }),
    ]),
});

代码看起来有点笨拙，但这就是示例 覆盖默认的 MouseWheelZoom 选项。