使用 wrapX 时，OpenLayers WMTS 层图块未呈现在正确的位置

Question

我有一个小型 openlayers webapp（用于学习），它加载 WMTS 功能文件，从广告图层之一创建 WMTS 源，然后将该图层添加到地图。它在该源上没有启用 wrapX 的情况下正常工作。

但是，当为 WMTS 源启用 wrapX 时，渲染层的包裹部分无法正确渲染。它似乎在某些位置渲染了错误的图块。

问题在某些缩放级别下消失。对于这个例子，当我放大时，wrapX 在某个时候开始正常工作。

是什么导致了这种奇怪的 wrapX 行为，我该如何纠正它？

代码如下：

const Map = ol.Map;
const View = ol.View;
const WMTSCapabilities = ol.format.WMTSCapabilities;
const TileLayer = ol.layer.Tile;
const OSM = ol.source.OSM;
const WMTS = ol.source.WMTS;
const { optionsFromCapabilities } = ol.source.WMTS;
const parser = new WMTSCapabilities();

(async function () {
  //////////////////////////////////////////////
  //
  //  Create Map with OSM base layer
  //
  //////////////////////////////////////////////

  const map = new Map({
    target: "map",
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    view: new View({
      extent: [-100000000, -100000000, 100000000, 100000000],
      center: [0, 0],
      zoom: 0,
    }),
  });

  //////////////////////////////////////////////
  //
  //  Add layer from GIBS WMTS service
  //
  //////////////////////////////////////////////

  // Load Capabilities
  const response = await fetch(
    "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/1.0.0/WMTSCapabilities.xml"
  );
  const text = await response.text();
  const capabilities = parser.read(text);

  // Create Source
  const options = optionsFromCapabilities(capabilities, {
    layer: "GHRSST_L4_AVHRR-OI_Sea_Surface_Temperature",
  });
  options.wrapX = true;
  const source = new WMTS(options);

  // Create and add Layer
  const layer = new TileLayer({ source, preload: 1 });
  map.addLayer(layer);
})();

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>GIBS App</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css"
      type="text/css"
    />
    <style>
      #map {
        width: 100%;
        height: 500px;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <h1>GIBS App</h1>
    <div id="map"></div>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
    <script type="module" src="./index.js"></script>
  </body>
</html>

Answer 1

这似乎与当源位于 EPSG:4326 中时瓷砖网格定义比世界大有关，这是由 OpenLayers 预定义为全局投影。为了解决这个问题，我包含了 proj4，它有一个内置的 WGS84 定义，OpenLayers 认为它是全局的

const Map = ol.Map;
const View = ol.View;
const WMTSCapabilities = ol.format.WMTSCapabilities;
const TileLayer = ol.layer.Tile;
const OSM = ol.source.OSM;
const WMTS = ol.source.WMTS;
const { optionsFromCapabilities } = ol.source.WMTS;
const parser = new WMTSCapabilities();

ol.proj.proj4.register(proj4);

(async function () {
  //////////////////////////////////////////////
  //
  //  Create Map with OSM base layer
  //
  //////////////////////////////////////////////

  const map = new Map({
    target: "map",
    layers: [
      new TileLayer({
        source: new OSM(),
      }),
    ],
    view: new View({
      extent: [-100000000, -100000000, 100000000, 100000000],
      center: [0, 0],
      zoom: 0,
    }),
  });

  //////////////////////////////////////////////
  //
  //  Add layer from GIBS WMTS service
  //
  //////////////////////////////////////////////

  // Load Capabilities
  const response = await fetch(
    "https://gibs.earthdata.nasa.gov/wmts/epsg4326/best/1.0.0/WMTSCapabilities.xml"
  );
  const text = await response.text();
  const capabilities = parser.read(text);

  // Create Source
  const options = optionsFromCapabilities(capabilities, {
    layer: "GHRSST_L4_AVHRR-OI_Sea_Surface_Temperature",
  });
  options.wrapX = true;
options.projection = 'WGS84';
  const source = new WMTS(options);

  // Create and add Layer
  const layer = new TileLayer({ source, preload: 1 });
  map.addLayer(layer);
})();

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>GIBS App</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/css/ol.css"
      type="text/css"
    />
    <style>
      #map {
        width: 100%;
        height: 500px;
        border: 1px solid blue;
      }
    </style>
  </head>
  <body>
    <h1>GIBS App</h1>
    <div id="map"></div>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.3.1/build/ol.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js"></script>
    <script type="module" src="./index.js"></script>
  </body>
</html>

使用 wrapX 时，OpenLayers WMTS 层图块未呈现在正确的位置

OpenLayers WMTS layer tiles not rendered in correct place when using wrapX

openlayers

openlayers-6