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博客

相关推荐
软件技术NINI8 分钟前
MATLAB疑难诊疗:从调试到优化的全攻略
javascript·css·python·html
曦樂~11 分钟前
【Qt】信号与槽(Signal and Slot)- 简易计算器
开发语言·数据库·qt
歪歪10021 分钟前
React Native开发Android&IOS流程完整指南
android·开发语言·前端·react native·ios·前端框架
知识分享小能手22 分钟前
uni-app 入门学习教程,从入门到精通,uni-app组件 —— 知识点详解与实战案例(4)
前端·javascript·学习·微信小程序·小程序·前端框架·uni-app
yaoxin52112330 分钟前
212. Java 函数式编程风格 - Java 编程风格转换:命令式 vs 函数式(以循环为例)
java·开发语言
wangqiaowq30 分钟前
ImmutableList.of() 是 Google Guava 库 提供的一个静态工厂方法,用于创建一个不可变的(immutable)列表。
开发语言·windows·python
苏打水com40 分钟前
从 HTML/CSS/JS 到 React:前端进阶的平滑过渡指南
前端·javascript·html
十五年专注C++开发1 小时前
QDarkStyleSheet: 一个Qt应用的暗色主题解决方案
开发语言·c++·qt·qss
麦麦鸡腿堡1 小时前
Java的代码块介绍与快速入门
java·开发语言
一枚前端小能手1 小时前
🔐 单点登录还在手动跳转?这几个SSO实现技巧让你的用户体验飞起来
前端·javascript