问函数返回带有瓷砖日期的数组。
EN

Stack Overflow用户

提问于 2017-12-01 14:12:06

回答 1查看 94关注 0票数 0

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

正如我们看到的那样，函数用60秒的步骤从文件夹(文件夹)返回两个日期之间的所有日期。但我只想返回的日期，我有文件(层)在我的电脑，因为我没有图层的所有日期。

因此，我需要的是一个函数返回一个日期数组，其中只有瓷砖，然后根据输入的日期从这个层添加到映射中。

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

layer

javascript

momentjs

openlayers

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-12-04 06:43:36

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

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

你现在有两个选择：

添加一个<input type="file" multiple>，上传文件并使用FileAPI (这里是示例)。
您需要的是一个本地html文件，您可以从硬盘打开该文件。您可以使用一种尝试性的猜测方法。
找一种方法来构建一个日期列表，而不需要猜测它们，例如，命名文件夹的数量增加，而不是时间戳！
使用服务于一切的服务器软件。服务器可以访问文件系统并发送所需日期列表的“前端”。我不会提供一个如何-到这里，有大量的软件解决方案和方法-在堆叠溢出和搜索引擎。

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