Javascript OpenLayers3 WMTS内存不足错误

我正在尝试从WMST服务器获取英国的天气雷达数据

客户端可以很好地获得这些功能。之后，浏览器（Chrome和Firefox）在一段时间后崩溃，出现内存不足错误

与简单示例相比，在我的示例中唯一明显不同的是，与服务器的所有交互都需要API键

  var parser = new ol.format.WMTSCapabilities();
  var map;

  //I pass the API key here
  fetch('http://datapoint.metoffice.gov.uk/public/data/inspire/view/wmts?REQUEST=GetCapabilities&key=my_key_goes_here').then(function(response) {
    return response.text();
  }).then(function(text) {
    console.log('Capabilities found.'); //ok

    var result = parser.read(text);
    var options = ol.source.WMTS.optionsFromCapabilities(result, {
        layer: 'RADAR_UK_Composite_Highres', 
        matrixSet: 'EPSG:4326'
    });

    map = new ol.Map({
      layers: [
        new ol.layer.Tile({
          source: new ol.source.OSM(),
          opacity: 0.7
        }),
        new ol.layer.Tile({ //fails when this Tile is included
          opacity: 1,
          source: new ol.source.WMTS(options),
          //I set this,  figuring that the API key is still needed
          url: 'http://datapoint.metoffice.gov.uk/public/data/inspire/view/wmts?my_key_goes_here'
        })
      ],
      target: 'mymap',
      view: new ol.View({
        center: ol.proj.fromLonLat([0, 52.0]),   //near London, UK
        zoom: 7
      })
    });
  });

崩溃发生时，客户端没有尝试获取互动程序（因为我在调试器中看不到任何HTTP请求；最后一个是get capabilities请求）

---

关于什么可能导致这种情况的任何提示？

首先，请注意

ol.layer.Tile

没有

url

选项。理想情况下，GetCapabilities响应将公布一个已经具有密钥的服务url。由于您尝试访问的服务器没有此功能，因此您必须调整从GetCapabilities响应中获得的

结果

：

result.OperationsMetadata.GetTile.DCP.HTTP.Get[0].href += 'key=my_key_goes_here&'

第二个也是更严重的问题是GetCapabilities响应宣传不正确的比例分母和来源。要修复这些问题，必须再次调整结果：

result.Contents.TileMatrixSet[0].TileMatrix.forEach(function(m) {
  m.ScaleDenominator *= 111319.49079327358;
  m.TopLeftCorner = m.TopLeftCorner.reverse();
});

应用这些调整后，您可以将

结果

传递给

ol.source.WMTS.options fromCapabilities

，您将获得正确的映射

---

我强烈建议您联系服务提供商（联系信息也可以在GetCapabilities响应中找到），让他们知道GetCapabilities响应中的问题。

我可以补充一下，但由于客户没有尝试在我的案例中提取磁贴，它不能解决我的内存不足问题。也许你可以提供一个JSFIDLE来说明这个问题？好主意。完整的来源在这里：我已经更新了答案。问题是您的服务提供商的GetCapabilities响应在几个方面都不正确。我已经应用了这些调整。成功！我已向运行服务器的人员发送了一份通知，要求他们调查该问题。这张便条链接到这篇文章。非常感谢你的帮助。