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

Question

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

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

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

Answer 1

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);
   

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