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

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

OpenLayers function to switch many layers on by a loop

javascript

layer

switch-statement

openlayers