arcgis api（三）3.x和4.x 加載geoserver的wmts切片服務

   

1.arcgis api 3.x 加載wmts服務

2.arcgis api 4.x 加載wmts服務

arcgis api 3.x 加載geoserver的wmts服務和wms服務都比較簡單，有相對比較成熟的api類，但是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)
      })