Анимированный gif в OpenLayers 3

Есть gif, который анимирует изображение радара, которое я хочу использовать на своей карте openlayers 3. Я определяю слой как ol.layer.Image, а источник — ol.source.ImageStatic. Когда я это делаю, радар не анимируется.

Я предполагаю, что это связано с тем, что я определяю его как ImageStatic, но я получаю ошибки, когда пытаюсь добавить изображение на карту с любым другим параметром источника.

Кто-нибудь знает, что я должен использовать в качестве источника для анимированного изображения gif? Любые примеры того, где это было сделано, также были бы потрясающими. Спасибо!


animated-gif openlayers-3
person Stephen Fricke    schedule 04.01.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

  1. Добавьте div в ваш html-документ.

     <div id="map" class="map"></div>
 <div style="display: none;">
 <div id="marker" title="Marker"></div>
 </div>

  2. Настройте свой div с помощью css, чтобы он содержал анимированный gif.

    #marker {
width: 150px;
height: 150px;
background: url("http://netanimations.net/animated_earth_84.gif") no-repeat scroll 0% 0% transparent;
}

  3. Добавьте элемент div на карту как ol.Overlay.

    var pos = ol.proj.fromLonLat([23.3725, 35.208889]);
var marker = new ol.Overlay({
position: pos,
positioning: 'center-center',
element: document.getElementById('marker'),
stopEvent: false
});
map.addOverlay(marker);

и скрипку, чтобы увидеть ее в действии.

person pavlos    schedule 05.01.2016
comment
Спасибо, павлос, но проблема в том, что это должен быть слой на карте, например слой радара, который соответствует границам Соединенных Штатов, а не div с заданной шириной и высотой. - person Stephen Fricke; 05.01.2016
comment
почему бы тебе не сделать скрипку, чтобы показать нам свое дело. так что мы можем направить вас правильно - person pavlos; 05.01.2016