ArcGIS API for JavaScript 4.x加载GeoServer发布的WMTS服务

前言

 　　以前用OpenLayers加载GeoServer我记得很简单，现在用ArcGIS API加载捣鼓了一天没搞好，第二天早上来参考一篇文章搞好了，我此记录下。

背景

 　　客户没有ArcGIS Server的许可，所以就只能用GeoServer发布或者离线切片，先研究下GeoServer，后面如果心情好再研究下离线切片。网上有说离线切片好的，但我觉得离线切片不方便管理。

环境

 　　ArcGIS API for JavaScript 4.24

　　GeoServer 2.22.1

 

尝试过程

 　　用过ArcGIS API里面的 WMTSLayer、TileLayer、 WebTileLayer，还有其它的ImageLayer都试过，最后还是用的 WebTileLayer成功加载

解决方案

 　　节约时间先直接上关键代码：

   let url = 'http://localhost:8080/geoserver/test/gwc/service/wmts?layer=test:donghongyuan&style=&tilematrixset=EPSG:4326&Service=WMTS&Request=GetTile&Version=1.0.0&Format=image/png&TileMatrix=EPSG:4326:{level}&TileRow={row}&TileCol={col}'

      //加载GeoServer发布的wmts
      let layer = new WebTileLayer({
        id: 'ywImage',
        title: '业务影像',
        urlTemplate: url,
        spatialReference: new SpatialReference({ wkid: 4326 }),
        tileInfo: {
          'rows': 256,
          'cols': 256,
          'compressionQuality': 0,
          'origin': {
            'x': -180,
            'y': 90
          },
          'spatialReference': {
            'wkid': 4326
          },
          'lods': [{
            'level': 0,
            'resolution': 0.703125,
            'scale': 279541132.0143589
          },
          {
            'level': 1,
            'resolution': 0.3515625,
            'scale': 139770566.00717944
          },
          {
            'level': 2,
            'resolution': 0.17578125,
            'scale': 69885283.00358972
          },
          {
            'level': 3,
            'resolution': 0.087890625,
            'scale': 34942641.50179486
          },
          {
            'level': 4,
            'resolution': 0.0439453125,
            'scale': 17471320.75089743
          },
          {
            'level': 5,
            'resolution': 0.02197265625,
            'scale': 8735660.375448715
          },
          {
            'level': 6,
            'resolution': 0.010986328125,
            'scale': 4367830.1877243575
          },
          {
            'level': 7,
            'resolution': 0.0054931640625,
            'scale': 2183915.0938621787
          },
          {
            'level': 8,
            'resolution': 0.00274658203125,
            'scale': 1091957.5469310894
          },
          {
            'level': 9,
            'resolution': 0.001373291015625,
            'scale': 545978.7734655447
          },
          {
            'level': 10,
            'resolution': 0.0006866455078125,
            'scale': 272989.38673277234
          },
          {
            'level': 11,
            'resolution': 0.00034332275390625,
            'scale': 136494.69336638617
          },
          {
            'level': 12,
            'resolution': 0.000171661376953125,
            'scale': 68247.34668319309
          },
          {
            'level': 13,
            'resolution': 8.58306884765625e-005,
            'scale': 34123.67334159654
          },
          {
            'level': 14,
            'resolution': 4.291534423828125e-005,
            'scale': 17061.83667079827
          },
          {
            'level': 15,
            'resolution': 2.1457672119140625e-005,
            'scale': 8530.918335399136
          },
          {
            'level': 16,
            'resolution': 1.0728836059570313e-005,
            'scale': 4265.459167699568
          },
          {
            level: 17,
            resolution: 5.3644180297851563e-6,
            scale: 2132.729583849784
          },
          {
            level: 18,
            resolution: 0.000002682209014892578,
            scale: 1066.364791924892
          },
          {
            level: 19,
            resolution: 0.000001341104507446289,
            scale: 533.182395962446
          },
          {
            level: 20,
            resolution: 0.0000006705522537231445,
            scale: 266.591197981223
          },
          {
            level: 21,
            resolution: 0.0000003352761269,
            scale: 133.2955989906115
          },

          ]
        }
      })
      this.map.layers.add(layer);

 

 解析以及详细过程

　　一.影像处理部分(本篇着重解析代码，数据处理部分简单说下步骤)

　　1.发布影像

　　2.创建 gridset

　　 如果不需要自定义gridset,此步骤可以忽略，因为有默认的

　　3.切片

　　二.文档解析

　　1.打开WMTS 1.0.0 GetCapabilities document

　　

 　　2.文档解析

 

三. 瓦片请求解析

　　1.在瓦片图层里面预览发布的图层

 　　2..打开调试窗口，观察network里面的请求

 　　3.拼接地址关键参数解析

　　

 其它

1.WMS方式加载的代码

  // 加载geoserver发布的WMS服务
      const layer = new WMSLayer({
        id: 'test',
        title: '测试',
        url: "http://localhost:8080/geoserver/test/wms",
        sublayers: [
          {
            name: "donghongyuan"
          }
        ]
      }
      );
      this.map.layers.add(layer);

 2.用WMTS方式加载

      let layer = new WMTSLayer({
        url: "http://localhost:8080/geoserver/gwc/service", // url to the service
        activeLayer: {
          id: "donghongyuan",
        },
        // sublayers: [
        //    {
        //       name: "test:donghongyuan"
        //     }
        //  ]
      });
      this.map.layers.add(layer);

会报错：

 

经查阅，GeoServer发布的是SOAP，不支持REST，而SOAP这种方式arcgis api for js的["esri/layers/WMTSLayer"]是不支持的。（ Geoserver WMTS Service REST url）

 

总结

重要的是urlTemplate的拼接，然后选择 "esri/layers/WebTileLayer"这种方式

 

参考网址

　　1.geoserver发布wmts服务并使用arcgis js4.x调用

　　2.arcgis api（四）3.x和4.x 加载geoserver的wmts切片服务

　　3.REST和SOAP Web Service的比较（写得非常清晰易懂，转载于此）