OpenLayers 函数通过循环打开多个层

Question

我有一个图层切换控件，其中包含名为 (yyyy-mm-dd_hhmmss) 的（日期），当我单击它们时它们可以正常工作。

另外，我有输入（开始）和（结束）的标签和一个在这两个值之间循环层的按钮。

我需要一个function 来使此按钮激活图层（日期）或使它们按间隔循环打开

PS：这里我们可以使用title作为参考，displayInLayerSwitcher,true和setVisible(true)

我的代码如下

singleLayer = {}
singleLayer['1']	=	new ol.layer.Tile({
		title: "1",
			baseLayer: false,
			visible: false,
			source: new ol.source.XYZ({
			projection: 'EPSG:4326',
				wrapX: false,
				url: 'folder/yyyy-mm-dd_hhmmss/{z}/{x}/{-y}.png'
			})
	})
singleLayer['2'] = new ol.layer.Tile({
		title: "2",
			baseLayer: false,
			visible: false,
			source: new ol.source.XYZ({
			projection: 'EPSG:4326',
				wrapX: false,
				url: 'folder/yyyy-mm-dd_hhmmss/{z}/{x}/{-y}.png'
			})
		})

 singleLayer['3']	=	new ol.layer.Tile({
			title: "3",
				baseLayer: false,
				visible: false,
				source: new ol.source.XYZ({
				projection: 'EPSG:4326',
					wrapX: false,
					url: 'folder/yyyy-mm-dd_hhmmss/{z}/{x}/{-y}.png'
				})
		})
			 	 })


	var dates = new ol.layer.Group({
		openInLayerSwitcher: false,
		visible: false,
		layers:[
			singleLayer['1'],
			singleLayer['2'],
			singleLayer['3'],
		]
	});

<p>Loop Layers<p>
              <p>From date: <input type="text" name="fromdate" id="fromdate" value="yyyy-mm-dd_hhmmss"></p>
              <p>To date: <input type="text" name="todate" id="todate" value="yyyy-mm-dd_hhmmss"></p>
              <button onclick="loopLayer()">Loop layer by time interval</button>
              
function loopLayer() {
  .........
  }

Answer 1

var time = new ol.layer.Group({ ....... });

let intervalHandle = null;
let activeLayerIndex = -1;

function startAnimation() {
  // check if interval is already running
  if (!intervalHandle) {
    activeLayerIndex = 0;
    // make sure all layers of the group are hidden
    time.getLayers().forEach(layer => layer.setVisible(false));

    intervalHandle = setInterval(function() {
      const allLayers = time.getLayers();
      if (activeLayerIndex >= allLayers.getLength()) {
        // we reached the end, stop animating
        stopAnimation();
      }
      allLayers.item(activeLayerIndex).setVisible(true);

      if (activeLayerIndex > 0) {
        // hide the previous layer
        allLayers.item(activeLayerIndex -1).setVisible(false);
      }
      activeLayerIndex += 1;
    }, 500 /* milliseconds */);
  }
}

function stopAnimation() {
  if(intervalHandle) {
    clearInterval(intervalHandle);
    intervalHandle = null;
  }
}