Question

OpenLayers 中的 Mapbox WMTS 支持

2018-11-30

914

mapbox openlayers

我已经使用 Mapbox Studio 创建了 Mapbox 样式并将其设置为在 WMTS 上使用。样式的 URL 为：

https://api.mapbox.com/styles/v1/username/styleId/wmts?access_token=token

其中 styleId 、 username 和 token 是变量字段。

当我尝试使用上述 URL 在 OpenLayers 中创建 WMTS 图层时，使用 createFromCapabilitiesMatrixSet 成功创建了 tileGrid ，但我从 Mapbox 收到响应错误 Invalid query param layer 。

经过一番调查，我注意到：

响应错误对于从OpenLayers 在创建图块加载函数时。看起来 Mapbox 无法正确识别它们。
OpenLayers 网站和 Mapbox 还提供了使用 XYZ 图层在它们之间进行集成的示例。

那么，这是 OpenLayers 某种不受支持的功能吗？还是我在创建 WMTS OpenLayers 时需要配置其他任何内容？

Answer 1

使用

  url: 'https://api.mapbox.com/styles/v1/username/styleId/tiles/{z}/{x}/{y}?access_token=token'

设置为标准 OpenLayers XYZ 图层要简单得多，如示例中所示。

Mapbox 提供 WMTS 支持，以兼容其他一些系统。它也可以在 OpenLayers 中使用，设置将是

  var parser = new ol.format.WMTSCapabilities();
  fetch('https://api.mapbox.com/styles/v1/username/styleId/wmts?access_token=token').then(function(response) {
      return response.text();
  }).then(function(text) {

      var layer = new ol.layer.Tile({
          source: new ol.source.WMTS(
              ol.source.WMTS.optionsFromCapabilities(parser.read(text), {
                  layer: 'styleId',
                  matrixSet: 'EPSG:3857'
              })
          )
      });

      ....
      ....
      ....
      ....

  });

这两种方法最终都会加载相同的图块 URL，因此在支持 XYZ 的情况下使用 WMTS 没有任何优势。