首页 > 解决方案 > JS 无法读取远程源

问题描述

我是 JS 的新手,我正在尝试使用气象数据的动画创建时间维度 - 就像在这个链接上一样。我已经修改了一些文件以满足我的需要,例如 index.html 中的本节(正文部分):

<script type="text/javascript">

var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", (function(xhr) {
        var code = xhr.currentTarget.response;
        var codeBlock = document.getElementById("code");
        codeBlock.textContent = code;
        hljs.highlightBlock(codeBlock);
    }));
    oReq.open("GET", "osn.js");
    oReq.send();

var oReq = new XMLHttpRequest();
    oReq.addEventListener("load", (function(xhr) {
        var code = xhr.currentTarget.response;
        var codeBlock = document.getElementById("code-portus");
        codeBlock.textContent = code;
        hljs.highlightBlock(codeBlock);
    }));
    oReq.open("GET", "leaflet.timedimension.tilelayer.portus.js");
    oReq.send();
</script>

此脚本加载两个脚本 (osn.jsleaflet.timedimension.tilelayer.portus.js)

脚本 osn.js:

var startDate = new Date();
startDate.setUTCHours(0, 0, 0, 0);
var mymap = L.map('mapid').setView([35.2456, 24.807], 8);

var portusLayer = L.tileLayer('https://portus.puertos.es/Portus//pathtiles/wave/MED/VHM0/{d}{h}/map//{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://portus.puertos.es/Portus_RT/">Agencia Estatal de Meteorología (AEMET) y Puertos del Estado (OPPE)</a>',
    tms: true,
    maxZoom: 7,
});
var portusTimeLayer = L.timeDimension.layer.tileLayer.portus(portusLayer, {});

var portusBalLayer = L.tileLayer('https://portus.puertos.es/Portus//pathtiles/wave/S12B/VHM0/{d}{h}/map//{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://portus.puertos.es/Portus_RT/">Agencia Estatal de Meteorología (AEMET) y Puertos del Estado (OPPE)</a>',
    tms: true,
    minZoom: 8
});
var portusBalTimeLayer = L.timeDimension.layer.tileLayer.portus(portusBalLayer, {});

var overlayMaps = {
    "Mediterranean wave": portusTimeLayer,
    "Balearic wave": portusBalTimeLayer,
};

var baseLayers = getCommonBaseLayers(mymap); 
L.control.layers(baseLayers, overlayMaps).addTo(mymap);

portusTimeLayer.addTo(mymap);
portusBalTimeLayer.addTo(mymap);

为了简单起见,我链接leaflet.timedimension.layer.js

运行 index.html 时,我可以查看地图,但从portusBalLayer和读取数据时出错portusBalTimeLayer

错误输出

解决此问题的任何帮助表示赞赏。

标签: javascriptleaflet

解决方案


推荐阅读