Openlayers 6 上的 WMTS 图层显示不正确

Question

我对 WMTS 层没有太多经验，所以我在这里尽力而为。

我可以显示图像，但没有正确对齐。如果您需要更多信息，请随时告诉我。

Openlayers 版本：6.12

我正在使用的API描述如下：https://www.metoffice.gov.uk/services/data/datapoint/inspire-layers-detailed-documentation

我得到了这些功能，这里是一个示例：https://jpst.it/2MHNV

这是我正在使用的地图和投影：

map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
            projection: 'EPSG:4326',
            // visible: false
        }),
    ],
    target: 'map',
    view: new ol.View({
        projection: 'EPSG:4326',
        center: ['-0.036220550537109375', '51.63796305656433'], // lonlat
        zoom: 3,
    })
});

这是添加此 WMTS 层的代码：

const projection = map.getView().getProjection('EPSG:4326');
const projectionExtent = projection.getExtent();
const size = ol.extent.getWidth(projectionExtent) / 256;
const resolutions = new Array(12);
const matrixIds = new Array(12);

for (let z = 0; z < 12; ++z) {
   // generate resolutions and matrixIds arrays for this WMTS
   resolutions[z] = size / Math.pow(2, z);
   matrixIds[z] = "EPSG:4326:" + z;
}

map.addLayer(new ol.layer.Tile({
        source: new ol.source.WMTS({
            url: `${LINK}?key=${inspireKEY}`,    // http://datapoint.metoffice.gov.uk/public/data/inspire/view/wmts
            projection: projection,
            layer: LAYER,    // image/png
            matrixSet: 'EPSG:4326', 
            format: FORMAT,    // RADAR_UK_Composite_Highres
            style: STYLE,    // Bitmap 1km Blue-Pale blue gradient 0.01 to 32mm/hr
            tileGrid : new ol.tilegrid.WMTS({
                origin: ol.extent.getTopLeft(projectionExtent), // topLeftCorner  [-180, 90]
                resolutions: resolutions,    // [1.40625, 0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 0.0006866455078125]
                matrixIds: matrixIds    // ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11']
            })
        }),
        opacity: 0.7,
}));

这是未正确对齐的结果：

Chrome 请求 1 图块的示例负载

Answer 1

分辨率有误。矩阵从 2 格宽、1 格高开始：

        "Identifier": "EPSG:4326:0",
        "ScaleDenominator": 2511.1607142857147,
        "TopLeftCorner": [
          -180,
          90
        ],
        "TileWidth": 256,
        "TileHeight": 256,
        "MatrixWidth": 2,
        "MatrixHeight": 1

所以要计算您需要的分辨率

const size = ol.extent.getWidth(projectionExtent) / 256 / 2;

或

const size = ol.extent.getHeight(projectionExtent) / 256;

要在 EPSG:3857 中显示，请进行视图投影 EPSG:3857 并仅将 EPSG:4326 用于 WMTS 定义

    view: new ol.View({
        projection: 'EPSG:3857',
        center: ol.proj.fromLonLat([-0.036220550537109375, 51.63796305656433]),
        zoom: 3,
    })
});

const projection = ol.proj.get('EPSG:4326');

要去除灰色（其中 RGB 值似乎总是 [199,191,193]），您可以将 WMTS 源包装在 ol.source.Raster 内并将这些像素设置为透明

map.addLayer(new ol.layer.Image({
    source: new ol.source.Raster({
        sources: [
            new ol.source.WMTS({
                ...
                ...
                crossOrigin: ''
            })
        ],
        operation: function (pixels, data) {
            const pixel = pixels[0];
            if (pixel[0] == 199 && pixel[1] == 191 && pixel[2] == 193) {
                pixel[3] = 0;
            }
            return pixel;
        }
    }),
    opacity: 0.7,
}));

这将需要跨源访问 - 数据托管在 http 上，因此如果您的应用程序托管在 https 上，它将无法工作。 OpenLayers 6.13 中还有一个导致闪烁的错误，因此恢复到 6.12。

Openlayers 6 上的 WMTS 图层显示不正确

WMTS layer on Openlayers 6 not displaying correctly

openlayers

openlayers-6