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

html 复制代码
<!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博客

相关推荐
「QT(C++)开发工程师」42 分钟前
嵌入式Lua脚本编程核心概念
开发语言·lua
_extraordinary_44 分钟前
Java Spring事务,事务的传播机制
java·开发语言·spring
一个处女座的程序猿O(∩_∩)O1 小时前
Vue-Loader 深度解析:原理、使用与最佳实践
前端·javascript·vue.js
还是大剑师兰特2 小时前
TypeScript 面试题及详细答案 100题 (91-100)-- 工程实践与框架集成
前端·javascript·typescript·1024程序员节
可触的未来,发芽的智生2 小时前
触摸未来2025-10-25:蓝图绘制
javascript·python·神经网络·程序人生·自然语言处理
用户47949283569152 小时前
typeof null === 'object':JavaScript 最古老的 bug 为何 30 年无法修复?
前端·javascript·面试
golang学习记2 小时前
Go slog 日志打印最佳实践指南
开发语言·后端·golang
新手村领路人2 小时前
python opencv gpu加速 cmake msvc cuda编译问题和设置
开发语言·python·opencv
非凡ghost2 小时前
By Click Downloader(下载各种在线视频) 多语便携版
前端·javascript·后端
非凡ghost3 小时前
VisualBoyAdvance-M(GBA模拟器) 中文绿色版
前端·javascript·后端