声明：本文为LJH原创文章，转载请注明出处。
ArcGIS API for JavaScript 4出来不是很久，网上的教程也比较少。那今天就来说一下如何用ArcGIS API for JavaScript（AJS4）做一个图层列表吧。
用EasyUI的同学可移步至下面的链接（EasyUI中的CheckBox Tree具有双击事件）
http://www.jianshu.com/p/76c19aad0459
用3.x版本的同学可参考下面的链接，本文思路也来自于此。
http://blog.csdn.net/GISShiXiSheng/article/details/40377699
话不多说，开始制作我们的图层控制吧！
主要思路：1、获取图层（可通过数组实现）；2、通过innerHTML将带有图层信息的复选框加至HTML；3.控制图层的显示；
图层的获取可通过将FeatureLayer添加进数组实现，图层的显示通过FeatureLayer.visible实现，源代码如下：
HTML代码
<body>
<div id="viewDiv"></div>
<div id="layerList"></div>
<script>
//括号中的数字表示要加载的图层数，记得更改这里哦
LoadMapByCount(4);
</script>
</body>
css代码
#layerList{
position: absolute;
top: 500px;
right: 12px;
width: 300px;
height: 200px;
border: 1px solid black;
z-index: 2;
background-color: rgba(250, 250, 250,1);
}
JS代码
//定义数组，用于存储图层
var pFeaLyrs = new Array();
function LoadMapByCount(layerCount){
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/core/watchUtils",
"dojo/dom",
"dojo/promise/all",
"dojo/query",
"dojo/on",
"dojo/domReady!"
], function (Map, MapView, FeatureLayer, watchUtils, dom, all, query, on)
{
var pMap = new Map();
var pMapView = new MapView({
container: "viewDiv",
map: pMap
});
//加载图层，
AddLayer2Map();
//别忘了改URL！
function AddLayer2Map() {
for (var i = 0; i < layerCount; i++) {
var mainLayer = new FeatureLayer({
url: "http://localhost:6080/arcgis/rest/services/无标题/MapServer/"+i
});
pFeaLyrs[i]=mainLayer;
pMap.add(mainLayer);
};
};
setTimeout(function() {
var htmlTxt="" ;
for (var i = 0; i < layerCount; i++) {
var lyr = pFeaLyrs[i];
htmlTxt += "<input id='" + lyr.id + "' name='layerList' class='listCss' type='checkbox' value='checkbox' "+(lyr.visible ? "checked":"")+"/>"+lyr.title + "<br>";
}
document.getElementById("layerList").innerHTML=htmlTxt;
on(dojo.query(".listCss"), "click", function() {
var inputs = dojo.query(".listCss");
alert(inputs.length);
for(var i=0;i<inputs.length;i++){
var lyr =pFeaLyrs[i];
if(inputs[i].checked) lyr.visible=true;
else lyr.visible=false;
}
});
}, 1000);
}
);
};
最终效果：
QQ截图20170711100227.png
最后：第二次发文章，依旧小激动。本人小白，文中可能会有些不对，或者是不完善的地方。如发现，望指出，蟹蟹阅读。
网友评论