07 地图添加图层控制控件
图层控制控件主要实现在地图上面图层的显示和隐藏，通过选择或取消各图层名称前面的复选框来实现图层的动态添加，效果如下图：
上图实现了一个北京地铁线路的显示与隐藏效果，通过点击右侧面板的图层名称前面的复选框，可以实现图层的显示与隐藏。下面来看一下具体的实现过程：
1 在开始构建此示例之前，我们先要发布相关的服务，在运用图层控件的时候，这个服务我们可以发布到Online上，也可以发布到server上面，在此我们将它发布到Online上。
准备相关的数据材料，打开ArcGIS Online后，登录，依次选择【地图 | 添加 | 从文件添加图层】，选择数据材料后将此数据发布为Online上的服务，我们可以在【内容】里面查看此服务，可以看到此服务包含两部分：一是一个基础底图，而是你发布的数据，如图：
2 构建图层控件最主要是使用“esri/dijit/LayerList”组件来构建，所以要引用此组件。此示例中的底图我们是用ArcGIS Online上的地图资源来创建，所以要引用“esri/arcgis/utils”组件来创建底图，如下：
require(["esri/arcgis/utils",
"esri/dijit/LayerList",
"dojo/domReady!"],
function(arcgisUtils,LayerList){
});3 创建两个div。一个来存放地图，另一个来存放图层列表，设置其相关的样式，如下：
<div class="container">
<div id="layerListPane">
<div id="layerList"></div>
</div>
<div id="map"></div>
</div>样式：
html,body,.container,#map{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Open Sans";
}
#map{
padding: 0;
position: absolute;
top: 0;
left: 0;
}
#layerListPane{
width: 25%;
position: absolute;
top: 20%;
right: 10px;
z-index: 50;
}4 运用“arcgisUtils.createMap”来构建地图，使用Layerlist来实例化一个图层控件，如下：
arcgisUtils.createMap("adee35af6219434e86f90aec13aaffcd","map").then(function (response) {
var mywidget=new LayerList({
map:response.map,
layers:arcgisUtils.getLayerList(response)
},"layerList");
mywidget.startup();
});上述代码中创建地图时使用了服务id的方式来创建底图，此id号可在下述页面中找到;
5 至此，一个图层控件已经开发完成，具体的显示效果已经在本文开头展示。
很多同学可能觉得将服务发布到Online，然后再用Online上的服务资源创建底图的做法很反人类，毕竟我们很多时候是通过Map来实例化底图，然后进行相关的操作的，没有必要为了实现一个图层控件来将自己之前所做的工作推翻，所以，ArcGIS官方文档中有另一套实现路线：
5.1 按正常的流程实例化一个底图，运用Map；
5.2 按正常的流程实例化多个图层；
5.3 实例化图层控件，设置控件的各个参数，相关实例如下所示：
5.4 https://developers.arcgis.com/javascript/3/jsapi/layerlist-amd.html#layers
此处有对此控件相关参数的具体说明，请参考并实例化自己的图层控件。
此示例完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--图层控制显示部件-->
<title>layer list</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.24/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css">
<style>
html,body,.container,#map{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: "Open Sans";
}
#map{
padding: 0;
position: absolute;
top: 0;
left: 0;
}
#layerListPane{
width: 25%;
position: absolute;
top: 20%;
right: 10px;
z-index: 50;
}
</style>
<script src="https://js.arcgis.com/3.24/"></script>
<script>
require(["esri/arcgis/utils",
"esri/dijit/LayerList",
"dojo/domReady!"],
function(arcgisUtils,LayerList){
//此示例中通过ArcOnline中的地图服务资源来创建地图
//此服务资源除了包含一个基本底图之外，还有一个北京地铁线路的图层
arcgisUtils.createMap("adee35af6219434e86f90aec13aaffcd","map").then(function (response) {
var mywidget=new LayerList({
map:response.map,
layers:arcgisUtils.getLayerList(response)
},"layerList");
mywidget.startup();
});
});
</script>
</head>
<body>
<div class="container">
<div id="layerListPane">
<div id="layerList"></div>
</div>
<div id="map"></div>
</div>
</body>
</html>