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

   

1.arcgis api 3.x 加载wmts服务

arcgis api 3.x 加载geoserver的wmts服务和wms服务都比较简单，有相对比较成熟的api类。

        // 定义图层
        const layerInfo = new WMTSLayerInfo({
          identifier: 'nurc:Img_Sample',
          tileMatrixSet: 'EPSG:4326',
          format: 'image/png'
        })
        const options = {
          serviceMode: 'KVP',
          layerInfo: layerInfo
        }

        const wmtsLayer = new WMTSLayer('http://ip:port/geoserver/gwc/service/wmts', options)
        mapView.addLayer(wmtsLayer)

2.arcgis api 4.x 加载wmts服务

       4.x的WMTSLayer类加载wmts服务会有很多问题，api的示例很简单，但是，用在自己实际的geoserver的切片服务上，会报错，显示title和id未定义，图层未加载等问题，尝试着模拟3.x的api设置activeLayer类，但是还是无法加载。

const WMTSLayer =new WMTSLayer({

    url:"https://gibs.earthdata.nasa.gov/wmts/epsg4326/best",

    // url to the service

    activeLayer: {

        id:"SRTM_Color_Index",
    }
})

     然后就思考着，4.x添加天地图的在线地图通过WebTileLayer的接口去实现，然后本地的geoserver的wmts服务也是跟在线天地图的形式一样，那么是否也可以用这一套方法，答案是可以，于是做了一系列尝试。需要注意的是，view的坐标系、切片tileInfo必须与geoserver发布的时候的参数一致，比如如果geoserver发布的是EPSG:4326坐标的，切片金字塔用的EPSG:4326， 那么view的坐标系也得是4326， tileInfo对象则把geoserverEPSG:4326的切片方案相关参数拷贝一下。

    let layer = new WebTileLayer({
      id: 'baseMap',
      urlTemplate: 'http://192.168.1.236:16080/geoserver/gwc/service/wmts?SERVICE=WMTS&request=GetTile&version=1.0.0&LAYER=hthtmap:tdt_map_11&tileMatrixSet=EPSG:4326&TileMatrix=EPSG:4326:{level}&TileRow={row}&TileCol={col}&style=&format=image/png',
      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
      }]
    }
    })

    let map = new map({
      // basemap: baseMap
      layers: [layer]
    })

    let  mapView = new MapView({
        map: map,
        container: 'mapDiv',
        center: [121, 31],
        zoom: 4
        spatialReference: new SpatialReference(4326)
      })