javascript - 如何使用 openlayers3 对 PNG 图像进行动画处理

Question

我需要用 openlayers-3 实现一个功能。描述:有一系列图像.png。我需要像动画一样播放它们。我将图像源设置为 ImageStatic，但是当我将当前图像设置为 false 时，它​​不起作用。可见属性似乎不起作用。代码:

  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 .图层[1 ] 是一个组，要获取图像图层​​，请尝试:

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

您还可以通过直接渲染到 Canvas 来制作“真实”动画:

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