子曰，温故而知新。目前还没项目做，记在纸上，字写得太潦草，还是写在网上吧，可以随时看。

  第一个例子就不从写hello word版的地图开始了，4.16案例名叫layers-mapimagelayer-sublayers。大概就是地图子图层控制吧。

---

  先看效果图：

---

效果呢，就是点击下面的按钮， 控制Map中的layer显示或者关闭。

开始代码部分：

二、我们先看整体代码骨架

var renderer = {};
var layer = new MapImageLayer();
var map = new Map();
var view = new MapView();
layer.when();
var sublayersElement = document.querySelector();
sublayersElement.addEventListener("click", function (event){})

声明renderer对象，用来给下面MapImageLayer实例化里面的layer设置样式。然后Map类加载MapImageLayer，并通过MapView显示。layer.when()用来控制下面一排按钮 的样式，如果是可见的，那就高亮显示，最后给下面一排按钮添加点击事件，通过事件，控制图层是否显示。总体思路就是这样，下面开始细分各个部分代码。

二、代码细分

1.

var renderer = {
          type: "simple", // autocasts as new SimpleRenderer()
          symbol: {
            type: "simple-line", // autocasts as new SimpleLineSymbol()
            color: [255, 255, 255, 0.5],
            width: 0.75,
            style: "long-dash-dot-dot"
          }
        };

第一个属性type，是渲染器的类型，通过查询API文档，它还有:"classbreaks"|"dictionary"|"dotdensity"|"heatmap"|"simple"|"unique-value"这些类型，有一些我也没试过，需要自行探索，本文的是一个简单的渲染，比如最后一个unique-value，惟一值类型，用过arcgis的可以知道，这个就是按要素图层的值来渲染，比如要分别显示不同年龄段的样式，就按不同的年龄段为一个值。

第二个属性symbol，他到底有哪些属性，读者可以自行查询，在esri/symbols/Symbol里面。type是符号类型，API里列举的其他类型有："simple-marker"|"picture-marker"|"simple-line"|"simple-fill"|"picture-fill"|"text"|"shield-label-symbol"|"point-3d"|"line-3d"|"polygon-3d"|"web-style"|"mesh-3d"|"label-3d"|"cim"。本文是线型。color、width表颜色，线宽。style应该是类似css样式。这个不太清楚。

2、 

 var layer = new MapImageLayer({
          url:
            "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
          sublayers: [
            {
              id: 2,
              visible: true
            },
            {
              id: 4,
              visible: false,
              title: "Railroads",
              renderer: renderer,
              source: {
                // indicates the source of the sublayer is a dynamic data layer
                type: "data-layer",
                // this object defines the data source of the layer
                // in this case it's a feature class table from a file geodatabase
                dataSource: {
                  type: "table",
                  // workspace name
                  workspaceId: "MyDatabaseWorkspaceIDSSR2",
                  // table name
                  dataSourceName: "ss6.gdb.Railroads"
                }
              }
            },
            {
              id: 1,
              visible: true
            },
            {
              id: 0,
              visible: true
            }
          ]
        });

MapImageLayer的实例化，指出url属性，这个url，复制到浏览器看，你会发现有四个图层，本文只要了2,1,0，还有一个ID为4的图层为url之外的。本例代码设置了一开始加载图层，id为4的图层为不可见（visible：false）。指定了前面创建的样式，source指定了图层的来源，type为这个东西是图层数据，关于他还有什么其他类型，请自行查找api。

3、

var map = new Map({
          basemap: "dark-gray",
          layers: [layer]
        });

        var view = new MapView({
          container: "viewDiv",
          map: map,
          zoom: 4,
          center: [-99, 39]
        });

加载。简单，不多废话

4

layer.when(function () {
          layer.sublayers.map(function (sublayer) {
            var id = sublayer.id;
            var visible = sublayer.visible;
            var node = document.querySelector(
              ".sublayers-item[data-id='" + id + "']"
            );
            if (visible) {
              node.classList.add("visible-layer");
            }
          });
        });

我们来看下官方解说 Wait for Layer to load and update the page to refelect which layers are visible in the Map Service.就是等待图层加载页面，然后反射到下面的按钮，让按钮样式变化。

一开始没学过es6，直接上手学习这个，被这段代码搞蒙了，后面问了一下公司的高哥，才知道这个是map数组的用法。

layer.sublayers.map会把layer里面的子图层给遍历出来，取出一个，我就查他的id，还是是否可见，如果可见，那么我通过id，找到css样式中的这个按钮，给这个按钮添加样式，也就是改变按钮样式。

---

前期加载界面全部完成，接下来写鼠标的点击事件

5

var sublayersElement = document.querySelector(".sublayers");
        sublayersElement.addEventListener("click", function (event) {
          var id = event.target.getAttribute("data-id");
          if (id) {
            var sublayer = layer.findSublayerById(parseInt(id));
            var node = document.querySelector(
              ".sublayers-item[data-id='" + id + "']"
            );
            sublayer.visible = !sublayer.visible;
            node.classList.toggle("visible-layer");
          }
        });

先获取四个按钮的DOM，为这四个按钮添加点击事件，通过 event.target.getAttribute获取点击的id，然后再通过id获取子图层，最后把子图层的visible取反，再把按钮样式切换（toggle功能）。

好了，全部完毕。

三、总结

1、怎么拿到子图层？通过layer.findSublayerById(id)。拿到之后，可以进一步控制它的可见性。

2、怎么拿到css样式的属性？通过event.target.getAttribute获取。