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

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中时，这似乎与图块网格定义大于世界有关，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>

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

问题描述投票：0回答：1

1个回答

最新问题

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

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1