Geoserver：openlayers通过元信息调用wmts服务

通常采用url方式加载wmts地图服务，为了减少获取wmts服务相关参数等步骤，如分辨率、坐标系、切片尺寸、级数等，本文采用openlayers的optionsFromCapabilities等方法，直接读取wmts服务的元信息，增加代码的灵活性。

1.wmts元信息路径

Geoserver通过gwc发布的wmts服务元信息url路径如下：

http://localhost:8080/geoserver/gwc/service/wmts?service=WMTS&version=1.0.0&request=GetCapabilities

获取结果如下所示：

2.openlayers读取元信息方法

直接上代码：

注意：wmts服务中可能不存在resolutions（分辨率）信息，导致options.tileGrid的resolution值为NAN，地图无法显示，此时可通过重新计算分辨率解决问题。

重新计算分辨率的公式：

resolution[z]=projectionWidth/tileSize/Math.pow(2,z+1)

其中：

z：切片级数，从0起算；

projectionWidth：空间参考的宽度；

tileSize：切片的大小，即png/jpeg的像素大小，通常为256或者512；

let parser = new ol.format.WMTSCapabilities();
let layerTitle = "test";
fetch("http://localhost:8080/geoserver/gwc/service/wmts?service=WMTS&version=1.0.0&request=GetCapabilities").then(response=>response.text()).then(text=>{
        let result = parser.read(text);
        let options = ol.source.WMTS.optionsFromCapabilities(result,{
          layer:layerTitle
        });
        //添加resolutions分辨率信息，直接获取的options.tileGrid分辨率为NAN，需重新计算
        let extentWidth = ol.extent.getWidth(options.projection.getExtent());
        for(let i in options.tileGrid.resolutions_){
          let tileSize = options.tileGrid.tileSizes_[i];
          options.tileGrid.resolutions_[i]=extentWidth/tileSize/Math.pow(2,parseInt(i)+1);
        }
        let maplayer = new ol.layer.Tile({
          name:layerTitle,
          source:new ol.source.WMTS(options)
        })
        that.map.addLayer(maplayer);
});

 3.geoserver跨域问题

网上解决的方法很多，可通过代理、修改geoserver配置等方式解决。

此次采用修改geoserver配置的方式：

geoserver/WEB-INF/web.xml中，添加以下代码，并重启geoserver，即可解决跨域问题。

		<filter>
		  <filter-name>CorsFilter</filter-name>
		  <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
		  <init-param>
		    <param-name>cors.allowed.origins</param-name>
		    <param-value>*</param-value>
		  </init-param>
		</filter>
		<filter-mapping>
		  <filter-name>CorsFilter</filter-name>
		  <url-pattern>/*</url-pattern>
		</filter-mapping>