1.加载ArcGISDynamicMapServiceLayer地图服务；2.获取ArcGISDynamicMapServiceLayer中的图层：layerInfos；3.遍历layerInfos，并动态添加添加显示隐藏的复选框。注意：第二步通过的就是添加load事件获取的。
全部代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地图基本操作</title> <style> .MapClass { width: 100%; height: 700px; border: 1px solid #000; position: relative; } #HomeButton{ position: absolute; top: 95px; left: 30px; z-index: 50; } #titlePane{ width:280px; background-color: white; } </style> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/> <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"/> <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/themes/calcite/dijit/calcite.css"> <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> <script> var map, mapCenter; var visible = [], setLayerVisibility; require(["esri/map", "dojo/on", "dojo/dom", "esri/layers/ArcGISDynamicMapServiceLayer", "dojo/query", "esri/toolbars/navigation", "esri/dijit/HomeButton", "esri/dijit/Measurement", "esri/geometry/webMercatorUtils", "esri/config", "esri/tasks/GeometryService", "esri/layers/GraphicsLayer", "esri/geometry/Point", "dojo/domReady!"], function (Map, on, dom, ArcGISDynamicMapServiceLayer, query, Navigation, HomeButton, Measurement, webMercatorUtils, esriConfig, GeometryService,GraphicsLayer, Point) { esriConfig.defaults.geometryService = new GeometryService("http://localhost:6080/arcgis/rest/services/Utilities/Geometry/GeometryServer"); map = new Map("mapDiv", { // basemap: "osm", // // center: [104.072331,30.66303], // // zoom: 11, logo:false }); var layer = new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/TestServer/MyMapService/MapServer"); map.addLayer(layer); // console.log(layer.layerInfos);//此时获取不到子图 // var chartLayer = new GraphicsLayer({"id": "chartLayer"}); // map.addLayer(chartLayer, 2); // mapCenter = new Point(120.118659, 36.003507, map.spatialReference); // map.centerAndZoom(mapCenter, 4); /** * connect的方式中回调函数直接返回了一个Layer数组，而on却不是，返回的是一个ArcGISDynamicMapServiceLayer图层，所以用on就需要使用layers.layer.layerInfos才能获取到子图层 */ // dojo.connect(layer, "onLoad", function(layers){ // console.log(layers.layerInfos); // }); // on(layer, "load", function(layers){console.log(layers.layer.layerInfos);}); // //图层控制开始： //这里使用connect了 dojo.connect(layer, "onLoad", loadLayerList); function loadLayerList(layers) { var html = "";//用于动态添加图层显隐的复选框html // console.log(map.spatialReference);//能获取空间参考了 //获取动态地图服务的子图层 var infos = layers.layerInfos; console.log(infos); //遍历动态地图服务的自图层 for (var i = 0; i < infos.length; i++){ var info = infos[i]; //图层默认显示的话就把图层id添加到visible if(info.defaultVisibility){ visible.push(info.id);//显隐就是通过使用方法setVisibleLayers()来实现的，其中需要一个参数数组，数组中设置需要显示的图层的索引(就是layerInfos中子图层的id属性) } //输出图层表的html html += "<div><input id=" + info.id + " class='listCss' type='checkbox' onclick='setLayerVisibility()'" + (info.defaultVisibility ? "checked" : "") + " />" + info.name + "</div>"; } console.log(visible); //设置可见图层 layer.setVisibleLayers(visible); //显示图层名称列表 dojo.byId("toc").innerHTML = html; } setLayerVisibility = function () { //用dojo.query来获取class为listCss元素数组 var inputs = dojo.query(".listCss"); visible = []; //对CheckBox数组进行遍历，把复选框选中的图层的id获取到添加到visible中 for (var i = 0; i < inputs.length; i++) { if (inputs[i].checked) { console.log(inputs[i].id); visible.push(inputs[i].id); } } console.log(visible); //设置可视图层 layer.setVisibleLayers(visible); }; //地图基本操作开始 //创建地图操作对象 var navToolbar = new Navigation(map); //给按钮添加绑定事件 query("button").on("click", function (event) { var value = this.innerText; switch (value) { case "平移": navToolbar.activate(Navigation.PAN); break; case "拉框缩小": navToolbar.activate(Navigation.ZOOM_OUT); break; case "拉框放大": navToolbar.activate(Navigation.ZOOM_IN); break; case "全图": navToolbar.zoomToFullExtent(); break; case "preView": navToolbar.zoomToPrevExtent(); break; case "漫游": //默认是漫游操作 navToolbar.deactivate(); break; } }); //alert(map.spatialReference); //创建主页按钮 var home=new HomeButton({ map:map },"HomeButton"); home.startup(); var measurement = new Measurement({ map: map }, dom.byId("measurementDiv")); measurement.startup(); }); </script> </head> <body> <div id="mapDiv" class="MapClass"> <div id="HomeButton"></div> <div style="position:absolute; right:20px; top:10px; z-Index:999;"> <div id="titlePane"> <div id="measurementDiv"></div> </div> </div> <div id="toc" style="position: absolute; left: 10px; bottom: 20px; border: 1px solid #9c9c9c; background: #fff; width: 100px; height: auto; z-index: 99;padding: 10px;"></div> </div> <button>拉框放大</button> <button>拉框缩小</button> <button>平移</button> <button>全图</button> <button>漫游</button> <button>preView</button> </body> </html>结果图：
