如何使用openlayers3為Image png設置動畫

Question

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

  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 ]是一個組，要獲取圖像層，請嘗試：

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