arcgis for javascript TileLayer 自定义高德地图图层

最新推荐文章于 2024-03-01 10:40:39 发布

jieyucx

最新推荐文章于 2024-03-01 10:40:39 发布

阅读量1k

点赞数

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

本文链接：https://blog.csdn.net/jieyucx/article/details/131083769

版权

arcgis for javascript 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

效果如图：
在这里插入图片描述

一、创建自定义切片层

要创建自定义图块层，您必须调用BaseTileLayer类的createSubclass()方法。命名自定义层为TintLayer
由于这一层需要知道在哪里访问预定义的图块，我们将创建一个属性。应用程序将为图层提供值，图层将从生成的 URL 中获取切片。然后在显示每个图像之前将差异混合操作应用于 Stamen 块。我们将在该层上创建一个属性，以便应用程序可以指定一种颜色，该颜色将用于混合操作

 
const TintLayer = BaseTileLayer.createSubclass({
  // 设置特定于此图层的特性
  properties: {
    // tile的url，由应用程序提供
    urlTemplate: null,
	// 更改图层颜色
    tint: {
      value: null,
      type: Color
    }
  }
});

可以通过两种不同的方式扩展 BaseTileLayer：

请求图块，因为它们是从数据源预定义的
图像或数据需要在视图中显示之前进行预处理

二、请求图块

要请求从数据源预定义的图像，请覆盖getTileUrl()方法，以便它返回给定级别、行和列的所请求图块的 URL。

const MyCustomTileLayer = BaseTileLayer.createSubclass({
  properties: {
    urlTemplate: null
  },

  // 重写getTileUrl()
  // 为LayerView提供的给定级别、行和列生成tile url
  getTileUrl: function(level, row, col) {
    return this.urlTemplate
      .replace("{z}", level)
      .replace("{x}", col)
      .replace("{y}", row);
  }
});

三. 图像或数据在视图中显示之前需要进行预处理

如果数据或图块需要在显示前进行预处理，则覆盖fetchTile()方法。图像和颜色混合后，最终结果将显示在视图中

const TintLayer = BaseTileLayer.createSubclass({
          properties: {
            urlTemplate: null,
            tint: {
              value: null,
              type: Color,
            },
          },

          //为LayerView提供的给定级别、行和列生成tile url
          getTileUrl: function (level, row, col) {
            return this.urlTemplate.replace("{z}", level).replace("{x}", col).replace("{y}", row);
          },

          // 此方法获取指定级别和大小的瓦片
          // 重写此方法以处理从服务器返回的数据
          fetchTile: function (level, row, col, options) {
            // 调用getTileUrl（）方法来构造tiles的URL
            // 对于LayerView提供的给定级别、行和列
            const url = this.getTileUrl(level, row, col);

            // 基于生成的url请求平铺
            // the signal option 确保废弃的请求被中止
            return esriRequest(url, {
              responseType: "image",
              signal: options && options.signal,
            }).then(
              function (response) {
                // esri请求解析成功时
                // 从响应中获取图像
                const image = response.data;
                const width = this.tileInfo.size[0];
                const height = this.tileInfo.size[0];

                // 使用二维渲染上下文创建画布
                const canvas = document.createElement("canvas");
                const context = canvas.getContext("2d");
                canvas.width = width;
                canvas.height = height;

                // 将应用程序提供的色调应用于画布
                if (this.tint) {
                  // 获取一个rgba形式的CSS颜色字符串，表示tint color实例.
                  context.fillStyle = this.tint.toCss();
                  context.fillRect(0, 0, width, height);

                  // 在画布和steman平铺之间应用“差异”混合操作。差值混合操作从顶层（瓦片）中减去底层（画布），或者反过来总是得到一个正值
                  context.globalCompositeOperation = "difference";
                }

                //将混合图像绘制到画布上。
                context.drawImage(image, 0, 0, width, height);

                return canvas;
              }.bind(this)
            );
          },
        });

四、使用自定义切片层

        // 创建TintLayer的新实例并设置其属性
        let jianyueTileLayer = new TintLayer({
          urlTemplate: "http://webst01.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}",
          title: "高德",
        });
        // 将自定义平铺层的新实例添加到地图
        const map = new Map({
          layers: [jianyueTileLayer],
        });

        // 创建新的场景视图并添加贴图
        const view = new SceneView({
          container: "viewDiv",
          map: map,
          center: [0, 30],
          zoom: 3,
          environment: {
            lighting: {
              type: "virtual",
            },
          },
        });

五、完整代码如下：

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Custom TileLayer</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>
    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.26/"></script>

    <script>
      require([
        "esri/Map",
        "esri/request",
        "esri/Color",
        "esri/views/SceneView",
        "esri/widgets/LayerList",
        "esri/layers/BaseTileLayer",
      ], (Map, esriRequest, Color, SceneView, LayerList, BaseTileLayer) => {
        // *******************************************************
        // 自定义图层类代码
        // 创建一个BaseTileLayer的子类
        // *******************************************************

        const TintLayer = BaseTileLayer.createSubclass({
          properties: {
            urlTemplate: null,
            tint: {
              value: null,
              type: Color,
            },
          },

          //为LayerView提供的给定级别、行和列生成tile url
          getTileUrl: function (level, row, col) {
            return this.urlTemplate.replace("{z}", level).replace("{x}", col).replace("{y}", row);
          },

          // 此方法获取指定级别和大小的瓦片
          // 重写此方法以处理从服务器返回的数据
          fetchTile: function (level, row, col, options) {
            // 调用getTileUrl（）方法来构造tiles的URL
            // 对于LayerView提供的给定级别、行和列
            const url = this.getTileUrl(level, row, col);

            // 基于生成的url请求平铺
            // the signal option 确保废弃的请求被中止
            return esriRequest(url, {
              responseType: "image",
              signal: options && options.signal,
            }).then(
              function (response) {
                // esri请求解析成功时
                // 从响应中获取图像
                const image = response.data;
                const width = this.tileInfo.size[0];
                const height = this.tileInfo.size[0];

                // 使用二维渲染上下文创建画布
                const canvas = document.createElement("canvas");
                const context = canvas.getContext("2d");
                canvas.width = width;
                canvas.height = height;

                // 将应用程序提供的色调应用于画布
                if (this.tint) {
                  // 获取一个rgba形式的CSS颜色字符串，表示tint color实例.
                  context.fillStyle = this.tint.toCss();
                  context.fillRect(0, 0, width, height);

                  // 在画布和steman平铺之间应用“差异”混合操作。差值混合操作从顶层（瓦片）中减去底层（画布），或者反过来总是得到一个正值
                  context.globalCompositeOperation = "difference";
                }

                //将混合图像绘制到画布上。
                context.drawImage(image, 0, 0, width, height);

                return canvas;
              }.bind(this)
            );
          },
        });
        let jianyueTileLayer = new TintLayer({
          urlTemplate: "http://webst01.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}",
          title: "高德",
        });
        // 将自定义平铺层的新实例添加到地图
        const map = new Map({
          layers: [jianyueTileLayer],
        });

        // 创建新的场景视图并添加贴图
        const view = new SceneView({
          container: "viewDiv",
          map: map,
          center: [0, 30],
          zoom: 3,
          environment: {
            lighting: {
              type: "virtual",
            },
          },
        });

        // 创建图层列表小部件
        const layerList = new LayerList({
          view: view,
        });
        view.ui.add(layerList, "top-right");
      });
    </script>
  </head>

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

jieyucx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
arcgis for javascript TileLayer 自定义高德地图图层

要创建自定义图块层，您必须调用类的方法。命名自定义层为TintLayer由于这一层需要知道在哪里访问预定义的图块，我们将创建一个属性。应用程序将为图层提供值，图层将从生成的 URL 中获取切片。然后在显示每个图像之前将差异混合操作应用于 Stamen 块。我们将在该层上创建一个属性，以便应用程序可以指定一种颜色，该颜色将用于混合操作// 设置特定于此图层的特性 properties : {
复制链接

扫一扫