Question

我有js代码，它返回存储在我PC上的图层日期（使用OpenLayers和Momentjs）。

我们看到该函数返回文件夹（文件夹）中两个日期之间的所有日期，步长为60秒。但我想在PC上只返回文件（图层）的日期，因为我没有所有日期的图层。

所以我需要的是一个函数返回一个我只有瓷砖的日期数组，然后从这个图层添加到地图取决于输入的日期

＆＃13;

function loopLayer() {
  const FromDateTime = document.getElementById("fromdate").value;
  const dateFrom = moment(FromDateTime, "YYYY-MM-DD HH:mm:ss", true);
  if (!dateFrom.isValid()) {
    log("something");
    return;
  }

  const ToDateTime = document.getElementById("todate").value;
  const dateTo = moment(ToDateTime, "YYYY-MM-DD HH:mm:ss", true);
  if (!dateTo.isValid()) {
    log("something");
    return;
  }

  let loopDate = dateFrom;
  for(let i=0; dateFrom.isSameOrBefore(dateTo) && i < 100; i++) {
    // preventing from loading thousands of layers
    loopLayerByDate(loopDate);
    loopDate = loopDate.add(60, 'seconds');

  }
}

function loopLayerByDate(dateObject) {
  const folderDate = dateObject.format("YYYY-MM-DD_HHmmss");
  const source = new ol.source.XYZ({
    projection: 'EPSG:3854',
    // adapt url and source tile type to your setup
    url: "folder/" + folderDate + "/{z}/{x}/{-y}.png"

  });


  const layer = new ol.layer.Tile({
    source: source,
    title: "layer"
  });
  map.addLayer(layer)
}

＆＃13;

Answer 1

出于安全原因，网站通常无法从本地文件系统读取数据。否则任何网站都可能监视你的硬盘。

正如您已经发现的那样，该规则有一个例外：当您打开本地HTML文件时，它可以从硬盘读取文件内容。但是您无法抓取文件夹，因此我们无法读取可用日期列表。

你现在有两个选择：

添加<input type="file" multiple>，上传文件并使用FileAPI（example此处）。
你的东西是你从你的硬盘打开的本地html文件。您可以使用试错法猜测方法
找到一种方法来构建日期列表，而无需猜测它们，例如：用越来越多的数字命名文件夹而不是时间戳！
使用服务于所有内容的服务器软件。服务器可以访问文件系统并发送＆＃34;前端＆＃34;所需的日期列表。我不会在这里提供一个方法，有大量的软件解决方案以及如何在stackoverflow和搜索引擎中使用。

选项2，本地HTML：

由于您大致了解文件名的范围，因此您可以使用强制方法，只查询范围内的所有日期，并查看实际响应的日期。请注意，这种方法远非理想，可能非常慢。

function guessValidDates(arrayOfDates){
    const validDates = [];
    arrayOfDates.forEach((date) => {
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "time/" + date + "/1.png", true);
        xhttp.send();
    console.log('request returned', xhttp);
        if (xhttp.response) {
            validDates.push(date;
        }
    });
    return validDates;
}

使用示例：

// example from loopLayer function
let loopDate = dateFromObject;
const allDates = [];
for(let i=0; dateFromObject.isSameOrBefore(dateToObject) && i < 100; i++) {
  // the i counts as a failsafe, preventing us from loading billions of 
  // or whatever the pattern is for your file path
  allDates.push(loopDate.format("YYYY-MM-DD_HHmmss"));

  // step forward by X
  loopDate = loopDate.add(1, 'minutes');
}

const validDates = guessValidDates(allDates);
// now you know the valid dates and can use them. Example:
validDates.forEach(function(someDate){ 
  loopLayerByDate(someDate);
});

或者如果你有一个模式，其中一天的所有图层都有越来越多的数字，例如"time/" + yearMontDay + '_' + increasingNumber + "/{z}/{x}/{-y}.png"，只需继续添加图层，直到你得到无效的回复：

function isValidLayer(someDateString, someNumber) {
  var xhttp = new XMLHttpRequest();
  xhttp.open("GET", "time/" + someDateString + "_" + someNumber + "/1.png", true);
  xhttp.send();
  if (xhttp.response) {
      return true;
  }
  return false;
}

// you can now count up until you don't get a valid response anymore:

let someDateString = dateObject.format("YYYY-MM-DD_HHmmss");
let increasingNumber = 0;
while(increasingNumber < 1000) {
    // the condition is just a failsafe
    if(isValidLayer(someDateString, increasingNumber) {
      // add layer with that number to your map
      const source = new ol.source.XYZ({
        projection: 'EPSG:4326',
        wrapX: false,
        url: "time/" + folderDate + "_" + increasingNumber + "/{z}/{x}/{-y}.png"
      });
      // TODO add layer here and so on....
    } else {
      // no more layers, stop!
      console.log('stopped after' + increasingNumber + 'layers on date ' + someDateString);
      break;
    }
}

函数返回包含tile

1 个答案: