使用arcgis api for js加载影像 | 如何在19级数时放大18级数的瓦片图层？

如何在19级数时放大18级数的瓦片图层？

众所周知，目前的开放图层，比如天地图、高德地图、腾讯地图、百度地图等等地图开发公司，所开发的图层，大多只提供到3-18级数，但有时候，我们的需求，仅仅是需要对18级数的瓦片图层，实现放大即可。那应该如何实现这个需求呢？

实现这个其实不算太难，只需要两步即可。

第一步，设置MapView的lods

lods必须做出限制，否则默认是底图图层的lods

// 视图用的
let lodsView =[
    { level: 0, resolution: 156543.033928, scale: 591657527.591555 },
    { level: 1, resolution: 78271.5169639999, scale: 295828763.795777 },
    { level: 2, resolution: 39135.7584820001, scale: 147914381.897889 },
    { level: 3, resolution: 19567.8792409999, scale: 73957190.948944 },
    { level: 4, resolution: 9783.93962049996, scale: 36978595.474472 },
    { level: 5, resolution: 4891.96981024998, scale: 18489297.737236 },
    { level: 6, resolution: 2445.98490512499, scale: 9244648.868618 },
    { level: 7, resolution: 1222.99245256249, scale: 4622324.434309 },
    { level: 8, resolution: 611.49622628138, scale: 2311162.217155 },
    { level: 9, resolution: 305.748113140558, scale: 1155581.108577 },
    { level: 10, resolution: 152.874056570411, scale: 577790.554289 },
    { level: 11, resolution: 76.4370282850732, scale: 288895.277144 },
    { level: 12, resolution: 38.2185141425366, scale: 144447.638572 },
    { level: 13, resolution: 19.1092570712683, scale: 72223.819286 },
    { level: 14, resolution: 9.55462853563415, scale: 36111.909643 },
    { level: 15, resolution: 4.77731426794937, scale: 18055.954822 },
    { level: 16, resolution: 2.38865713397468, scale: 9027.977411 },
    { level: 17, resolution: 1.19432856685505, scale: 4513.988705 },
    { level: 18, resolution: 0.597164283559817, scale: 2256.994353 },
    { level: 19, resolution: 0.298582141647617, scale: 1128.497176 },
    { level: 20, resolution: 0.14929107082380833, scale: 564.248588 },
    { level: 21, resolution: 0.07464553541190416, scale: 282.124294 },
    // { level: 22, resolution: 0.03732276770595208, scale: 141.062147 },
    // { level: 23, resolution: 0.01866138385297604, scale: 70.5310735 },
  ]
const view = new MapView({
  map: map,
  container: "mapviewDom",
  center,
  zoom: 18,
  constraints: {
    lods: lodsView,
    minZoom: 3,
    maxZoom: 21,
  }
});

第二步，设置底图图层的tileInfo

// 图层用的
let tileInfo = {
  compressionQuality: 0,
  dpi: 96,
  format: "PNG8",
  origin: {
    spatialReference: { latestWkid: 3857, wkid: 102100 },
    x: -20037508.342787,
    y: 20037508.342787,
  },
  lods: [
    { level: 0, resolution: 156543.033928, scale: 591657527.591555 },
    { level: 1, resolution: 78271.5169639999, scale: 295828763.795777 },
    { level: 2, resolution: 39135.7584820001, scale: 147914381.897889 },
    { level: 3, resolution: 19567.8792409999, scale: 73957190.948944 },
    { level: 4, resolution: 9783.93962049996, scale: 36978595.474472 },
    { level: 5, resolution: 4891.96981024998, scale: 18489297.737236 },
    { level: 6, resolution: 2445.98490512499, scale: 9244648.868618 },
    { level: 7, resolution: 1222.99245256249, scale: 4622324.434309 },
    { level: 8, resolution: 611.49622628138, scale: 2311162.217155 },
    { level: 9, resolution: 305.748113140558, scale: 1155581.108577 },
    { level: 10, resolution: 152.874056570411, scale: 577790.554289 },
    { level: 11, resolution: 76.4370282850732, scale: 288895.277144 },
    { level: 12, resolution: 38.2185141425366, scale: 144447.638572 },
    { level: 13, resolution: 19.1092570712683, scale: 72223.819286 },
    { level: 14, resolution: 9.55462853563415, scale: 36111.909643 },
    { level: 15, resolution: 4.77731426794937, scale: 18055.954822 },
    { level: 16, resolution: 2.38865713397468, scale: 9027.977411 },
    { level: 17, resolution: 1.19432856685505, scale: 4513.988705 },
    { level: 18, resolution: 0.597164283559817, scale: 2256.994353 },
  ],
  cols: 256,
  rows: 256,
  spatialReference: { latestWkid: 3857, wkid: 102100 },
  maxZoom: 18,
  minZoom: 3,
};
// 底图
let basemap = new Basemap({
  baseLayers: [
    new WebTileLayer({
      visible: true,
      maxScale: 0,
      tileInfo: tileInfo,
      title: "vec",
      urlTemplate:
        "http://webrd{subDomain}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={col}&y={row}&z={level}",
      subDomains: ["01", "02", "03", "04"],
    })
  ]
});
// 地图实例
const map = new Map({
   basemap
});

示例

注：网上针对这个问题找了很久，也咨询过一些开发者，但还是没有解决。
谁知道我踩了多少坑，谁能想到图层的lods和view的lods都要设置才能有效o(╥﹏╥)o