ArcGIS API for JavaScript開發教程系列(三)之圖層列表控件
圖層列表控件控制圖層的顯示與否，把勾選的圖層可以疊加在基礎底圖之上，通過對圖層的取消勾選，讓其不在地圖上顯示，具體的看代碼的註釋吧
首先是JavaScript的代碼：用於創建地圖與添加圖層列表控件
//定義需要引入的功能模塊
require([
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (arcgisUtils, LayerList) {
//創建新的map，根據map id請求使用arcgis online的地圖
arcgisUtils.createMap("df8bcc10430f48878b01c96e907a1fc3", "map").then(function (response) {
//創建新的圖層列表控件，放在id爲“layerList”的div裏
var myWidget = new LayerList({
map: response.map,
//根據請求返回的地圖，獲取地圖的圖層列表，添加到圖層列表的圖層中
layers: arcgisUtils.getLayerList(response)
//把圖層列表放置在id爲“layerList”的div裏
}, "layerList");
//打開圖層列表
myWidget.startup();
});
});下面是全部的代碼：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Layer List Dijit</title>
<!--引入外部樣式表-->
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css" />
<!--設置樣式-->
<style>
html, body, .container, #map {
height:100%;
width:100%;
margin:0;
padding:0;
font-family:"Open Sans";
}
#map {
padding:0;
}
#layerListPane {
width:25%;
}
.esriLayer {
background-color:#fff;
}
.esriLayerList .esriList {
border-top:none;
}
.esriLayerList .esriTitle {
background-color:#fff;
border-bottom:none;
}
.esriLayerList .esriList ul {
background-color: #fff;
}
</style>
<script>
var dojoConfig = { parseOnLoad: true };
</script>
<script src="https://js.arcgis.com/3.16/"></script>
<script>
//定義需要引入的功能模塊
require([
"esri/arcgis/utils",
"esri/dijit/LayerList",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/domReady!"
], function (arcgisUtils, LayerList) {
//創建新的map，根據map id請求使用arcgis online的地圖
arcgisUtils.createMap("df8bcc10430f48878b01c96e907a1fc3", "map").then(function (response) {
//創建新的圖層列表控件，放在id爲“layerList”的div裏
var myWidget = new LayerList({
map: response.map,
//根據請求返回的地圖，獲取地圖的圖層列表，添加到圖層列表的圖層中
layers: arcgisUtils.getLayerList(response)
//把圖層列表放置在id爲“layerList”的div裏
}, "layerList");
//打開圖層列表
myWidget.startup();
});
});
</script>
</head>
<body class="claro">
<div class="container" data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline',gutters:false">
<!--圖層列表顯示的div控件-->
<div id="layerListPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div id="layerList"></div>
</div>
<!--放置地圖的div控件-->
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
這是最後的效果：
