函数返回带有瓷砖日期的数组。
函数返回带有瓷砖日期的数组。
提问于 2017-12-01 22:12:06
我有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)
}
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-12-04 14: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;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47602204
复制相关文章
相似问题
腾讯云开发者
