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

Если произошла ошибка, она должна иметь следующий класс CSS в HTML: olImageLoadError

если вы хотите скрыть это добавить следующие строки в таблице стилей:

.olImageLoadError { 
    display: none; 
} 

Answer 3

с OpenLayers 2.12 CSS необходим

.olImageLoadError 
    { 
     display: none !important; 
    }