Wie man Bild png mit openlayers3 animiert

Question

Ich muss eine Funktion mit openlayers-3 implementieren. Beschreibung: Es gibt eine Reihe von Bildern .png. Ich muss sie wie eine Animation spielen. Ich setze die Bildquelle als ImageStatic, aber wenn ich das aktuelle Bild sichtbar setze, ist es falsch, es funktioniert nicht. die sichtbare Eigenschaft scheint nicht zu funktionieren. Code:

var extent = [0, 0, 418, 600]; 
 
     var projection = new ol.proj.Projection({ 
 
      code: 'xkcd-image', 
 
      units: 'pixels', 
 
      extent: extent 
 
     }); 
 

 
     var map = new ol.Map({ 
 
      layers: [ 
 
       new ol.layer.Tile({ 
 
        source: new ol.source.OSM() 
 
       }), 
 
       new ol.layer.Group({ 
 
        layers: [ 
 
         new ol.layer.Image({ 
 
          source: new ol.source.ImageStatic({ 
 
           url: 'http://localhost:2265/images3/test2.png', 
 
           projection: projection, 
 
           imageExtent: extent, 
 
          }) 
 
         }), 
 
        new ol.layer.Image({ 
 
         source: new ol.source.ImageStatic({ 
 
          url: 'http://localhost:2265/images2/test1.png', 
 
          projection: projection, 
 
          imageExtent: extent, 
 
         }) 
 
        }) 
 
        ] 
 
       }) 
 
      ], 
 
      target: 'map', 
 
      view: new ol.View({ 
 
       projection: projection, 
 
       center: ol.extent.getCenter(extent), 
 
       zoom: 2, 
 
       maxZoom: 8 
 
      }) 
 
     }); 
 
     var layers = map.getLayers().getArray(); 
 
     var frame = 1; 
 
     setInterval(function() { 
 
      layers[frame].setVisible = false; 
 
      frame = (frame + 1) % 2; 
 
      layers[frame].setVisible = true;    
 
     },500);

Answer 1

map.layers [1] eine Gruppe ist, die Bildschichten versuchen zu bekommen:

var layers = map.getLayers().getArray()[1].getLayers().getArray(); 

Sie können auch tun 'echte' Animation-Rendering direkt auf die Leinwand:

http://openlayers.org/en/latest/examples/feature-move-animation.html http://openlayers.org/en/latest/examples/flight-animation.html