cesiumlab切片通过arcgisjs加载

本文介绍: > 需要注意2个地方，一个是tileInfo，一个是getTileUrl，> 在tileInfo中定义好cesiumlab切片的相关信息。> getTileUrl 格式化url的格式。> 注意设置编辑，避免超出范围报404。

cesiumlab切片通过arcgisjs加载

需要注意2个地方，一个是tileInfo，一个是getTileUrl，
在tileInfo中定义好cesiumlab切片的相关信息。
getTileUrl 格式化url的格式。
注意设置编辑，避免超出范围报404。

<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
  <title>WebTileLayer</title>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="http://localhost:8093/arcgis/4.28/esri/themes/light/main.css" />
  <script src="http://localhost:8093/arcgis/4.28/init.js"></script>

  <script>
    var bashUrl = "http://localhost:8093/cesiumKlmy"
    var url = "/{z}/{x}/{y}.png";
    require(["esri/Map", "esri/views/SceneView", "esri/layers/WebTileLayer", "esri/geometry/SpatialReference", 'esri/layers/support/TileInfo'],
      (Map, SceneView, WebTileLayer, SpatialReference, TileInfo) => {

        const tileInfo = new TileInfo({
          dpi: 90.71428571428571,
          format: "image/png",
          spatialReference: new SpatialReference({
            wkid: 4326,
          }),
          origin: {
            x: -180,
            y: 90
          },
          lods:
            [{
              level: 0,
              levelValue: 1,
              resolution: 0.703125,
              scale: 295497593.05875003
            },
            {
              level: 1,
              levelValue: 2,
              resolution: 0.3515625,
              scale: 147748796.52937502
            },
            {
              level: 2,
              levelValue: 3,
              resolution: 0.17578125,
              scale: 73874398.264687508
            },
            {
              level: 3,
              levelValue: 4,
              resolution: 0.087890625,
              scale: 36937199.132343754
            },
            {
              level: 4,
              levelValue: 5,
              resolution: 0.0439453125,
              scale: 18468599.566171877
            },
            {
              level: 5,
              levelValue: 6,
              resolution: 0.02197265625,
              scale: 9234299.7830859385
            },
            {
              level: 6,
              levelValue: 7,
              resolution: 0.010986328125,
              scale: 4617149.8915429693
            },
            {
              level: 7,
              levelValue: 8,
              resolution: 0.0054931640625,
              scale: 2308574.9457714846
            },
            {
              level: 8,
              levelValue: 9,
              resolution: 0.00274658203125,
              scale: 1154287.4728857423
            },
            {
              level: 9,
              levelValue: 10,
              resolution: 0.001373291015625,
              scale: 577143.73644287116
            },
            {
              level: 10,
              levelValue: 11,
              resolution: 0.0006866455078125,
              scale: 288571.86822143558
            },
            {
              level: 11,
              levelValue: 12,
              resolution: 0.00034332275390625,
              scale: 144285.93411071779
            },
            {
              level: 12,
              levelValue: 13,
              resolution: 0.000171661376953125,
              scale: 72142.967055358895
            },
            {
              level: 13,
              levelValue: 14,
              resolution: 8.58306884765625e-005,
              scale: 36071.483527679447
            },
            {
              level: 14,
              levelValue: 15,
              resolution: 4.291534423828125e-005,
              scale: 18035.741763839724
            },
            {
              level: 15,
              levelValue: 16,
              resolution: 2.1457672119140625e-005,
              scale: 9017.8708819198619
            },
            {
              level: 16,
              levelValue: 17,
              resolution: 1.0728836059570313e-005,
              scale: 4508.9354409599309
            },
            {
              level: 17,
              levelValue: 18,
              resolution: 5.3644180297851563e-006,
              scale: 2254.4677204799655
            },
            {
              level: 18,
              levelValue: 19,
              resolution: 2.68220901489257815e-006,
              scale: 1127.23386023998275
            },
            {
              level: 19,
              levelValue: 20,
              resolution: 1.341104507446289075e-006,
              scale: 563.616930119991375
            },
            {
              level: 20,
              levelValue: 21,
              resolution: 6.705522537231445375e-7,
              scale: 281.8084650599956875
            },
            {
              level: 21,
              levelValue: 22,
              resolution: 3.3527612686157226875e-7,
              scale: 140.90423252999784375
            }
            ]

        })

        // 创建WebTileLayer实例
        const mylayer = new WebTileLayer({
          urlTemplate: bashUrl + url,
          tileInfo: tileInfo,
          spatialReference: {
            wkid: 4326
          },
          // 设置边界，避免超出范围了请求后台报404
          fullExtent:new Extent({
            xmin:84.96650291898627,
            ymin:45.53639816676759,
            xmax:85.03257700820414,
            ymax:45.600000206741775,
          })
        });
        // 格式化url
        mylayer.getTileUrl = function (level, row, col) {
          return this.urlTemplate
            .replace("{z}", level)
            .replace("{x}", col)
            .replace("{y}", row);
        }

        // 创建地图实例
        const map = new Map();
        // 创建视图实例
        const view = new SceneView({
          container: "viewDiv",
          map: map,
          // 中心点位置
          center: [85.03257700820414, 45.53639816676759],
          zoom: 10,
          spatialReference: new SpatialReference({
            wkid: 4326,
          })
        });
        map.add(mylayer, 0);
      })

  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>