Способ узнать, успешно ли загружено изображение тайла карты, используя 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;
}