arcgis js api加载4490服务，以basetilelayer方式

gislaozhang

于 2024-08-29 11:11:43 发布

阅读量209

点赞数 1

分类专栏： JS 文章标签： arcgis javascript 开发语言

本文链接：https://blog.csdn.net/gislaozhang/article/details/141673756

版权

JS 专栏收录该内容

21 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>以basetilelayer加载切片服务</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.27/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.27/"></script>

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/BaseTileLayer",
        "esri/layers/support/TileInfo",
        "esri/geometry/SpatialReference",
        "esri/geometry/Extent",
        "esri/config",
        "esri/request",
        "esri/layers/FeatureLayer",
      ], function (
        Map,
        SceneView,
        BaseTileLayer,
        TileInfo,
        SpatialReference,
        Extent,
        esriConfig,
        esriRequest,
        FeatureLayer
      ) {
        var tileInfo = new TileInfo({
          rows: 256,
          cols: 256,
          dpi: 96,
          format: "PNG",
          compressionQuality: 0,
          origin: {
            x: -180,
            y: 90,
          },
          spatialReference: {
            wkid: 4490,
            latestWkid: 4490,
          },
          lods: [
            {
              level: 0,
              resolution: 0.703125,
              scale: 2.958287637958547e8,
            },
            {
              level: 1,
              resolution: 0.3515625,
              scale: 1.4791438189792734e8,
            },
            {
              level: 2,
              resolution: 0.17578125,
              scale: 7.395719094896367e7,
            },
            {
              level: 3,
              resolution: 0.087890625,
              scale: 3.6978595474481836e7,
            },
            {
              level: 4,
              resolution: 0.0439453125,
              scale: 1.8489297737240918e7,
            },
            {
              level: 5,
              resolution: 0.02197265625,
              scale: 9244648.868620459,
            },
            {
              level: 6,
              resolution: 0.010986328125,
              scale: 4622324.4343102295,
            },
            {
              level: 7,
              resolution: 0.0054931640625,
              scale: 2311162.2171551147,
            },
            {
              level: 8,
              resolution: 0.00274658203125,
              scale: 1155581.1085775574,
            },
            {
              level: 9,
              resolution: 0.001373291015625,
              scale: 577790.5542887787,
            },
            {
              level: 10,
              resolution: 6.866455078125e-4,
              scale: 288895.27714438934,
            },
            {
              level: 11,
              resolution: 3.4332275390625e-4,
              scale: 144447.63857219467,
            },
            {
              level: 12,
              resolution: 1.71661376953125e-4,
              scale: 72223.81928609734,
            },
            {
              level: 13,
              resolution: 8.58306884765625e-5,
              scale: 36111.90964304867,
            },
            {
              level: 14,
              resolution: 4.291534423828125e-5,
              scale: 18055.954821524334,
            },
            {
              level: 15,
              resolution: 2.1457672119140625e-5,
              scale: 9027.977410762167,
            },
            {
              level: 16,
              resolution: 1.0728836059570312e-5,
              scale: 4513.9887053810835,
            },
            {
              level: 17,
              resolution: 5.364418029785156e-6,
              scale: 2256.9943526905417,
            },
            {
              level: 18,
              resolution: 2.682209014892578e-6,
              scale: 1128.4971763452709,
            },
            {
              level: 19,
              resolution: 1.341104507446289e-6,
              scale: 564.2485881726354,
            },
            {
              level: 20,
              resolution: 6.705522537231445e-7,
              scale: 282.1242940863177,
            },
            {
              level: 21,
              resolution: 3.3527612686157227e-7,
              scale: 141.06214704315886,
            },
            {
              level: 22,
              resolution: 1.6763806343078613e-7,
              scale: 70.53107352157943,
            },
          ],
        });

        var tileExtent = new Extent({
          xmin: 114.11814939507543,
          ymin: 30.477998641133187,
          xmax: 114.29229960553091,
          ymax: 30.60676075395578,
          spatialReference: {
            wkid: 4490,
          },
        });
        var MyCustomTileLayer = BaseTileLayer.createSubclass({
          properties: {
            urlTemplate: null,
          },
          getTileUrl: function (level, row, col) {
            return this.urlTemplate
              .replace("{z}", level)
              .replace("{x}", col)
              .replace("{y}", row);
          },
          fetchTile: function (level, row, col, options) {
            var url = this.getTileUrl(level, row, col);
            return esriRequest(url, {
              responseType: "image",
              allowImageDataAccess: true,
            }).then(
              function (response) {
                var image = response.data;
                var width = this.tileInfo.size[0];
                var height = this.tileInfo.size[0];
                var canvas = document.createElement("canvas");
                var context = canvas.getContext("2d");
                canvas.width = width;
                canvas.height = height;
                if (this.tint) {
                  context.fillStyle = this.tint.toCss();
                  context.fillRect(0, 0, width, height);
                  context.globalCompositeOperation = "difference";
                }
                context.drawImage(image, 0, 0, width, height);
                return canvas;
              }.bind(this)
            );
          },
        });

        var mylayer = new MyCustomTileLayer({
          urlTemplate:
            "https://edutrial.geoscene.cn/geoscene/rest/services/hanyang4490/MapServer/WMTS/tile/1.0.0/hanyang4490/default/default028mm/{z}/{y}/{x}.png",

          tileInfo: tileInfo,
        });

        var map = new Map({
          spatialReference: new SpatialReference({ wkid: 4490 }),
          basemap: {
            baseLayers: [mylayer],
          },
        });

        var view = new SceneView({
          container: "viewDiv",
          map: map,
          extent: tileExtent,
          spatialReference: new SpatialReference({ wkid: 4490 }),
        });
      });
    </script>
  </head>

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

参考资料：

arcgis javascript api4.x以basetilelayer方式加载arcgis发布的栅格切片服务_arcgis api for javascript加载本地影像切片-CSDN博客