javascript - OpenLayers3 WMTS 内存不足错误

Question

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

客户端可以获得很好的能力。之后，浏览器(Chrome 和 Firefox)会在一段时间后崩溃，并出现内存不足错误。

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

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

崩溃发生时客户端没有尝试获取图 block (因为我在调试器中看不到任何 HTTP 请求；最后一个是 get-capability 请求)。

任何关于可能导致此问题的原因的提示吗？

Answer 1

首先，请注意 ol.layer.Tile 没有 url 选项。理想情况下，GetCapability 响应将公布已具有 key 的服务 URL。由于您尝试访问的服务器没有该功能，因此您必须调整从 GetCapability 响应中获得的结果:

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

第二个也是更严重的问题是 GetCapability 响应公布了不正确的比例分母和原点。要解决这些问题，您必须再次调整结果:

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

应用这些调整后，您可以将结果传递给ol.source.WMTS.optionsFromCapability，您将获得正确的 map 。

我强烈建议您联系服务提供商(联系信息也可以在 GetCapability 响应中找到)并让他们知道 GetCapability 响应中存在的问题。