OpenLayers6（1）：访问GeoServer中GeoWebCache的WMTS切片图层

1 版本

• OpenLayers：6.4.3

---

2 geoserver中配置GeoWebCache

详见文章：geoserver2.18系列（4）：wms服务——影像切片缓存

---

3 OpenLayers中以WMTS服务的形式进行访问

以访问EPSG:4326的切片方案为例进行说明

3.1 GeoServer中查看相应的切片方案参数

 3.2 Openlayers中根据切片方案参数进行参数配置

const mGridset4326 = {
    gridNames: ['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', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'],
    resolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7],
    projection: new Projection({
        code: 'EPSG:4326',
        units: 'degrees',
        axisOrientation: 'neu'
    })
};

function wmtsOption(baseUrl, layername) {
    const url = baseUrl + "geoserver/gwc/service/wmts";
    console.info("wmtsOption-url", url);
    return {
        url: url,
        layer: layername,
        matrixSet: 'EPSG:4326',
        format: 'image/png',
        projection: mGridset4326.projection,
        tileGrid: new WMTSTileGrid({
            tileSize: [256, 256],
            extent: [-180.0, -90.0, 180.0, 90.0], //范围
            origin: [-180.0, 90.0],
            resolutions: mGridset4326.resolutions,
            matrixIds: mGridset4326.gridNames,
        }),
        wrapX: false,
        crossOrigin: 'anonymous'
    };
}

 3.3 Openlayers中进行访问

// TileLayer表示 ol.layer.Tile
// WMTSSource表示 ol.source.WMTS
export function getGwcWMTSLayer(baseUrl, layername) {
    const imageLayer = new TileLayer({
        source: new WMTSSource(wmtsOption(baseUrl, layername)),
    })
    return imageLayer;
}