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

原创已于 2022-05-30 21:07:37 修改 · 1.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-05-30 10:54:07 首次发布

geoserver 同时被 2 个专栏收录

2 篇文章

订阅专栏

openlayers

1 篇文章

订阅专栏

本文介绍采用OpenLayers的optionsFromCapabilities等方法直接读取WMTS服务元信息，以减少获取相关参数步骤、增加代码灵活性。给出了Geoserver发布的WMTS服务元信息URL路径，还提到解决分辨率为NAN的计算方法，以及通过修改Geoserver配置解决跨域问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通常采用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>