javascript - 使用 OpenLayers 判断地图瓦片图像是否已成功加载的方法

Question

使用 OpenLayers，是否有一种简单的方法来判断地图图像是否已正确加载，也许使用“loadend”事件？

我们正在从 GeoServer 读取地图图块，并使用 OpenLayers 来显示它们。大多数情况下，图像会在合理的时间内显示。偶尔（尤其是当使用鼠标滚轮来回滚动时），“loadend”事件会被触发，就好像图像已加载一样，但没有显示任何内容。

当我调查 HTML 时，似乎图像具有正确的 URL，但背景颜色为粉红色（通常是透明的），我在事件对象中看不到任何有用的东西。

有任何想法吗？

Answer 1

GeoServer 很可能只是不时无法生成图块。您可能可以做一些调整来提高性能，所以我可能会花一些时间来研究一下。

从 OpenLayers 的角度来看，您可以做一些简单的事情可能会有所帮助。首先，有一个名为的属性OpenLayers.IMAGE_RELOAD_ATTEMPTS，它告诉图层在获取图像失败时重试多少次。此值默认为 0（零）。我会尝试在代码顶部将其设置为 3，看看是否有帮助。

OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;

此外，如果您得到一个损坏的图块并希望它显示为粉红色以外的其他内容，您可以更新OpenLayers.Util.onImageLoadErrorColor代码顶部的值。

OpenLayers.Util.onImageLoadErrorColor = 'transparent';

您可以在此处浏览所有这些的源代码：http: //trac.openlayers.org/browser/trunk/openlayers/lib/OpenLayers/Util.js

Answer 2

使用 OpenLayers 2.12 所需的 css 是

    .olImageLoadError
    {
        display: none !important;
    }

Answer 3

如果出现错误，它应该在 HTML 中包含以下 CSS 类： olImageLoadError

如果您想隐藏它，请将以下内容添加到您的样式表中：

.olImageLoadError { 
    display: none;
}