使用Geoserver1.19.1内置GeoWebCache + openlayers发布并调用Arcgis瓦片步骤总结

一、版本列表

项目	版本
Geoserver	2.19.1
GeoWebCache	1.19.1（内置）
openlayers

GeoWebCache独立包版本需要与Geoserver内置GeoWebCache对应，测试使用GeoWebCache1.15.1发布的瓦片无法预览。

二、Geoserver内置GeoWebCache配置部署

• （1）在\webapps\geowebcache\WEB-INF中修改web.xml文件，加入如下内容：

//param-value为缓存存放位置，我自己在data_dir中新建了一个gwccache文件夹
<context-param>
	<param-name>GEOWEBCACHE_CACHE_DIR</param-name>
	<param-value>D:\Program Files\geoserver-2.19.2-bin\data_dir\gwccache</param-value>
</context-param>

重启geoserver后gwccache中多了三个文件

• （2）此时，在D:\Program Files\geoserver-2.19.2-bin\data_dir\gwccache 的geowebcache.xml的 layers 中添加arcgisLayer节点，但是Geoserver内置gwc不带有发布arcgis瓦片的功能，还需进行如下配置的配置。

<arcgisLayer>
	<name>ahImage</name>
	<tilingScheme>...\conf.xml</tilingScheme>
	<tileCachePath>..\_alllayers</tileCachePath>
	<hexZoom>false</hexZoom>
</arcgisLayer>

• （3）解压 GeoWebCache1.19.1，将其中的gwc-arcgiscache-1.19.1.jar，放到 geoserver/WEB-INF/lib/目录下去。
  
• （4）解压gs-gwc-2.19.1.jar，把 geowebcache-arcgiscache-context.xml 拷贝到 geoserver/WEB-INF/lib/gs-gwc-2.19.1.jar
• （5）在 geoserver/WEB-INF/lib/gs-gwc-2.19.1.jar/geowebcache-servlet.xml 文件里面增加 ：

  <import resource="geowebcache-arcgiscache-context.xml">
  

• （6）geoserver/WEB-INF/lib/gs-gwc-2.19.1.jar/geowebcache-core-context.xml 文件里面增加：

<bean id=“gwcArcGISGridsetConfiguration" class="org.geowebcache.arcgis.layer.ArcGISCacheGridsetConfiguration"/>

• 重新压缩 gs-gwc-2.19.1 文件夹为zip，修改后缀名为.jar。
• 重新启动可以预览切片。

三、使用openlayers调用切片

预览后查看网页源码，直接copy调用，可以自己精简一下代码

addImage() {
	const baseUrl = '.../geoserver/gwc/service/wmts';
	const layerName = 'ahImage';
    const style = '';
    const format = 'image/png';
    let projection = new Projection({
      code: 'EPSG:4326',
      units: 'degree',
      axisOrientation: 'neu'
     });
	const resolutions =  [1.40625, 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.145767211914063E-5, 1.072883605957031E-5];
    const gridsetName = 'EPSG:4326_ahImage';
	const gridNames =  ['EPSG:4326_ahImage:0', 'EPSG:4326_ahImage:1', 'EPSG:4326_ahImage:2', 'EPSG:4326_ahImage:3', 'EPSG:4326_ahImage:4', 'EPSG:4326_ahImage:5', 'EPSG:4326_ahImage:6', 'EPSG:4326_ahImage:7', 'EPSG:4326_ahImage:8', 'EPSG:4326_ahImage:9', 'EPSG:4326_ahImage:10', 'EPSG:4326_ahImage:11', 'EPSG:4326_ahImage:12', 'EPSG:4326_ahImage:13', 'EPSG:4326_ahImage:14', 'EPSG:4326_ahImage:15', 'EPSG:4326_ahImage:16', 'EPSG:4326_ahImage:17'];
    const baseParams = ['VERSION','LAYER','STYLE','TILEMATRIX','TILEMATRIXSET','SERVICE','FORMAT'];
	const params = {
      'VERSION': '1.0.0',
      'LAYER': layerName,
      'STYLE': style,
      'TILEMATRIX': gridNames,
      'TILEMATRIXSET': gridsetName,
      'SERVICE': 'WMTS',
      'FORMAT': format
     };
     function constructSource() {
      let url = baseUrl+'?';
      for (let param in params) {
	      if (baseParams.indexOf(param.toUpperCase()) > 0) {
		      url = url + param + '=' + params[param] + '&';
	      }
      }
      url = url.slice(0, -1);
      let source = new WMTS({
          url: url,
	      layer: params['LAYER'],
	      matrixSet: params['TILEMATRIXSET'],
	      format: params['FORMAT'],
	      projection: projection,
	      tileGrid: new WMTSTileGrid({
		      tileSize: [256,256],
		      extent: [-180.0,-270.0,180.0,90.0],
		      origin: [-180.0, 90.0],
		      resolutions: resolutions,
		      matrixIds: params['TILEMATRIX']
	      }),
	      style: params['STYLE'],
	      wrapX: true
        });
      return source;
      }
     let ahImage = new TileLayer({
       source: constructSource(),
       zIndex: 100,
     });
     map.addLayer(ahImage)
  },

结果展示：