上篇實作了基礎地圖加載以及二三維模式切換；本篇的内容則是圖層管理控制，從兩個不同角度來實作，分别是直接綁定arcgis api提供的圖層管理widget（LayerList）以及自定義圖層管理圖示的點選事件來控制圖層的隐藏或者顯示。不管是LayerList或者自定義圖示點選管理圖層的實作方式，核心都是根據Layer的屬性visible來設定true或者false來控制的。
一、談談本篇自己認為比較重要的幾個專業術語名稱的了解：
1.TileLayer
TileLayer，加載緩存地圖服務的瓦片圖層，緩存的服務通路緩存中的瓦片，而不是動态地繪制圖像。由于緩存機制，是以渲染的速度比MapImageLayers快多了，适合疊加瓦片切圖使用，而不是前端動态渲染的。
2.MapImageLayer
MapImageLayer，允許顯示和分析在一個地圖服務定義層資料，輸出圖像代替特征。地圖服務圖像是根據請求動态生成的。
3. ElevationLayer
ElevationLayer,即為加載地形高程的圖層，應用在三維模式下顯示。
4. SceneLayer
SceneLayer,即為加載三維場景圖層，應用在三維模式下顯示。
5. LayerList
LayerList,圖層清單控制控件，提供了一種方法來顯示一個清單的層以及提供控制圖層隐藏或者顯示。
二、LayerList具體實作思路：
1.上面描述的幾個類型圖層有個屬性listMode，預設show，即是這些圖層疊加在地圖上，預設是在LayerList裡面了的，要是LayerList建立的話
2.配置圖層資訊：
/*圖層配置*/
MapConfig.feconomic_sublayers = [
{id: 35,title:"行政區劃",visible:false,sublayers:[ {id: 38,title:"城市界線",visible: false},{id: 37,title:"省界",visible: true}]},
{id: 28,title:"海洋規劃",visible:true,sublayers:[ {id:34,title:"海岸基本功能區 ",visible: true},{id: 33,title:"經濟合作圈",visible: true},{id: 32,title:"經濟發展區",visible: true},{id: 31,title:"經濟灣區",visible:true},{id: 30,title:"經濟島群",visible: true}]},
{id: 27,title:"海域權屬",visible:false},
{id: 24,title:"岸線資源",visible:false,sublayers:[ {id: 26,title:"海岸帶",visible: true},{id: 25,title:"岸線",visible: true}]},
{id: 14,title:"海洋生态保護 ",visible:false,sublayers:[
{id:23,title:"海洋功能區劃 ",visible: true},
{id:22,title:"限制開發區 ",visible: true},
{id:21,title:"禁止開發區 ",visible: true},
{id:18,title:"海洋自然保護區 ",visible: true,sublayers:[{id:20,title:"海洋自然保護區 ",visible: true},{id:19,title:"海洋自然保護區點 ",visible: true}]},
{id:15,title:"海洋特别保護區 ",visible: true,sublayers:[{id:17,title:"海洋特别保護區 ",visible: true},{id:16,title:"海洋特别保護區點 ",visible: true}]}
]},
{id: 9,title:"漁業資源 ",visible:false,sublayers:[
//{id:13,title:"漁業資源",visible: false},
{id:12,title:"漁場",visible: true},
{id:11,title:"漁區",visible: true},
{id:10,title:"漁港",visible: true}
]},
{id: 8,title:"地質鑽孔",visible: false},
{id: 7,title:"觀測站",visible: false},
{id: 6,title:"海島",visible: false},
{id: 2,title:"海洋資源 ",visible:false,sublayers:[
{id:5,title:"其他資源",visible: true},
{id:4,title:"石油資源",visible: true},
{id:3,title:"礦産資源",visible: true}
]},
//{id: 1,title:"海洋企業",visible:false},
{id: 0,title:"視訊監控",visible:false}
]; 3.圖層建立：
var waterdepthLayer = new TileLayer({
url: MapConfig.waterdepthLayerUrl,
title:"水深栅格圖",
opacity:0.45,
visible:false,
id: "BaseMapWater"
});
var waterLayer = new MapImageLayer({
url: MapConfig.waterLayerUrl,
title:"葉綠素",
opacity:0.45,
visible:false,
id: "BaseMapWater"
});
var feconomicLayer = new MapImageLayer({
url: MapConfig.FEconomiclayerUrl,
title:"專題圖層",
visible:true,
sublayers: MapConfig.feconomic_sublayers
});
var elevationLayer = new ElevationLayer({
url: MapConfig.elevationLayer.Url
});
var map = BX.MapVars.map = new Map({
basemap: imgBasemap,
layers:[waterdepthLayer,hdyxLayer,waterLayer,feconomicLayer],
ground: new Ground({layers:[elevationLayer,hddxLayer]})
}); 4.LayerList建立：
//圖層控制器
mapPage.loadSwitcherLayers(appConfig.mapView,appConfig.sceneView);
/**
* 圖層控制器
*/
loadSwitcherLayers:function(mapView,sceneView){
require([
"esri/widgets/LayerList"
], function(LayerList) {
mapView.then(function() {//二維模式
var layerList = new LayerList({
view: mapView,
});
mapView.ui.add(layerList, "bottom-right");
});
sceneView.then(function() {//三維模式
var layerList = new LayerList({
view: sceneView
});
sceneView.ui.add(layerList, "bottom-right");
});
});
}, 5.效果圖如下：
三、自定義圖示點選事件管理圖層具體實作思路：
1.頁面設計：
<div id="tuceng_center">
<ul>
<li id="dynamic_0">
<div class="tucicon tucicon1"></div>
<p>視訊監控</p>
</li>
<li id="dynamic_2">
<div class="tucicon tucicon2"></div>
<p>海洋資源</p>
</li>
<li id="dynamic_6">
<div class="tucicon tucicon3"></div>
<p>海島</p>
</li>
<li id="dynamic_7">
<div class="tucicon tucicon4"></div>
<p>觀測站</p>
</li>
<li id="dynamic_8">
<div class="tucicon tucicon5"></div>
<p>地質鑽孔</p>
</li>
<li id="dynamic_9">
<div class="tucicon tucicon6"></div>
<p>漁業資源</p>
</li>
<li id="dynamic_14">
<div class="tucicon tucicon7"></div>
<p>海洋生态保護</p>
</li>
<li id="dynamic_24">
<div class="tucicon tucicon8"></div>
<p>岸線資源</p>
</li>
<li id="dynamic_27">
<div class="tucicon tucicon9"></div>
<p>海域權屬</p>
</li>
<li id="dynamic_28" class="selected">
<div class="tucicon tucicon10"></div>
<p>海洋規劃</p>
</li>
<li id="dynamic_35">
<div class="tucicon tucicon11"></div>
<p>行政區劃</p>
</li>
<li id="tile_0">
<div class="tucicon tucicon12"></div>
<p>3D場景</p>
</li>
<li id="tile_2">
<div class="tucicon tucicon14"></div>
<p>3D航道</p>
</li>
<li id="tile_1">
<div class="tucicon tucicon13"></div>
<p>水深栅格圖</p>
</li>
</ul>
</div> 2.點選事件：
//圖層控制點選事件監控
$("#tuceng_center ul li").click(function(){
$(this).toggleClass('selected');
var flag = false;
if($(this).attr("class") == "selected"){
flag = true;
}else{
flag = false;
}
var id = $(this).attr("id");
if(id.indexOf("dynamic")>-1)//動态圖層控制
{
id = id.split("_")[1];
if(feconomicLayer)
feconomicLayer.findSublayerById(Number(id)).visible = flag;
}else{//瓦片底圖控制
id = id.split("_")[1];
switch (id) {
case "0"://3D場景
if(mapPage.sceneLayer)
mapPage.sceneLayer.visible = flag;
break;
case "1"://水深栅格圖
if(waterdepthLayer)
waterdepthLayer.visible = flag;
break;
case "2"://3D航道
if(hdyxLayer){
hdyxLayer.visible = flag;
}
if(hddxLayer){
hddxLayer.visible = flag;
}
break;
}
}
}) 3.效果圖如下：
GIS之家作品店鋪：GIS之家作品店鋪
GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢