如何使用openlayers3動畫圖像png

我需要使用openlayers-3實現一個函數。描述：有一系列圖像.png。我需要像動畫一樣播放它們。我將圖像源設置爲ImageStatic，但是當我將當前圖像設置爲可見時，它不起作用。可見的屬性似乎不起作用。代碼：如何使用openlayers3動畫圖像png

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

來源

2017-08-29 figureout

我需要一系列圖像的動畫 – figureout

這是JavaScript腳本？ –

是的。是否有問題？ – figureout

map.layers [1]在一組，以獲得圖像層嘗試：

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

你也可以做 '真正的' 通過渲染動畫直接到了畫板：

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

來源

2017-08-29 13:44:23

不是我想要的例子。條件是我們需要通過我們的氣象數據呈現的圖像png播放雲圖 – figureout

雖然問題已經解決了。首先，我應該通過「var layers = 。map.getLayers（）的getArray（）[1] .getLayers（）的getArray（）;」。其次，它應該是「layers [0] .R.visible = false」或「layers [0] .setVisible（false）」 – figureout

如何使用openlayers3動畫圖像png

回答

相關問題