ArcGIS API for JavaScript 4.X学习——子图层（sublayers）

最新推荐文章于 2023-08-07 14:18:23 发布

悲伤小牛奶（快乐打工版）

最新推荐文章于 2023-08-07 14:18:23 发布

阅读量2.3k

点赞数

分类专栏： WebGIS学习文章标签： javascript html

本文链接：https://blog.csdn.net/Yuewayio/article/details/124437502

版权

WebGIS学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文通过示例介绍了如何使用ArcGIS API for JavaScript 4.23中的MapImageLayer类来设置和调整地图服务子图层的可见性和顺序。通过指定图层ID和可见性，可以实现对地图服务中不同图层的控制。此外，还展示了JavaScript代码，演示了如何改变和恢复子图层的显示顺序。

摘要由CSDN通过智能技术生成

内容概要：本地发布地图服务往往会将一整个地图文件进行发布，一个地图服务中包含了多个图层，我们可以通过sublayers属性的设置，对子图层进行控制。本文以MapImageLayer类下的sublayers属性设置为例，实现子图层并对子图层顺序进行调整。

小实例实现效果：

官网对应的内容如下：

MapImageLayer | API Reference | ArcGIS API for JavaScript 4.23 | ArcGIS Developerhttps://developers.arcgis.com/javascript/latest/api-reference/esri-layers-MapImageLayer.html#properties-summary参考的官方示例链接如下：

MapImageLayer - Toggle sublayer visibility | Sample Code | ArcGIS API for JavaScript 4.23 | ArcGIS Developerhttps://developers.arcgis.com/javascript/latest/sample-code/layers-mapimagelayer-sublayers/核心部分：

1. 创建MapImageLayer，对sublayers属性进行设置，下面的代码是基本的框架。（注意自行引入对应的模块）

const layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  sublayers: [
    {
      id: 3,//对应自己发布的服务的图层id号
      visible: false//对可见性进行设置，非必要，可根据自己的目标效果选择
    },
    {
      id: 2,
      visible: true
    },
    {
      id: 1,
      visible: true
    },
    {
      id: 0,
      visible: true
    }
  ]
});

2. 初次使用可能会不明白id的对应关系，我使用示例中的公共服务进行解释。

打开地图服务后，我们可以看见如下界面，sublayers中的id号即为layers下各图层后的id号。

小实例的完整代码如下：

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

    <link rel="stylesheet" href="http://localhost/4.18/esri/themes/light/main.css" />
    <script src="http://localhost/4.18/dojo/dojo.js"></script>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
      #layerchange {
        top: 40px;
        right: 20px;
        position: absolute;
        z-index: 99;
        background-color: white;
        border-radius: 8px;
        padding: 10px;
        opacity: 0.75;
      }

    </style>

    <script>
      require([
        "esri/Map", 
        "esri/views/MapView", 
        "esri/layers/MapImageLayer",
        "esri/widgets/LayerList",
        "esri/widgets/Home"], 
          (
            Map,
            MapView,
            MapImageLayer,
            LayerList,
            Home

      ) => {

        const vectorLayer = new MapImageLayer({
          url: "http://localhost:6080/arcgis/rest/services/hubei/湖北/MapServer",
          title: "vector",
          sublayers: [
              {
                  id: 2,
                  title: "hb",
                  visible: true
              },
              {
                  id: 1,
                  title: "county",
                  visible: true
              },
              {
                  id: 0,
                  visible:true,
                  title: "thist",
                  renderer: {
                    type: "simple", // autocasts as new SimpleRenderer()
                    symbol: {
                    type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
                    size: 5,
                    color: "pink"
                    }
                  }
              }
          ]
        });
        
        const map = new Map({
          basemap: "gray-vector",
          layers: [vectorLayer]
        });

        const view = new MapView({
          container: "viewDiv",
          map: map,
          center: [114.31667,30.51667],
          zoom: 5
        });

        const homeWidget=new Home({
          view: view
        });
        const layerlist = new LayerList({
          view: view
        });
        view.ui.add(homeWidget,"top-left");
        view.ui.add(layerlist,"top-left");
        view.ui.add("layerchange",
        {
          position: "top-right",
          index: 0
        });
        var countrylayer=vectorLayer.sublayers.getItemAt(1);

        const layerchangeBtn=document.getElementById("layerchangeBtn");
        const drawbackBtn=document.getElementById("drawbackBtn");

        layerchangeBtn.addEventListener("click",() =>{
          vectorLayer.sublayers.reorder(countrylayer,0);
        });
        drawbackBtn.addEventListener("click",() =>{
          vectorLayer.sublayers.reorder(countrylayer,1);
        })
      });

    </script>
  </head>

  <body>
    <div id="viewDiv">
        <span id="layerchange" class="esri-widget">
            <button id="layerchangeBtn" class="esri-button esri-button--secondary">改变图层顺序</button> 
            <button id="drawbackBtn" class="esri-button esri-button--secondary">回到默认顺序</button>  
    </div>
    
  </body>
</html>