上篇實(shí)現(xiàn)了基礎(chǔ)地圖加載以及二三維模式切換；本篇的內(nèi)容則是圖層管理控制，從兩個(gè)不同角度來(lái)實(shí)現(xiàn)，分別是直接綁定arcgis api提供的圖層管理widget（LayerList）以及自定義圖層管理圖標(biāo)的點(diǎn)擊事件來(lái)控制圖層的隱藏或者顯示。不管是LayerList或者自定義圖標(biāo)點(diǎn)擊管理圖層的實(shí)現(xiàn)方式，核心都是根據(jù)Layer的屬性visible來(lái)設(shè)置true或者false來(lái)控制的。
一、談?wù)劚酒约赫J(rèn)為比較重要的幾個(gè)專業(yè)術(shù)語(yǔ)名稱的理解：
1.TileLayer
TileLayer，加載緩存地圖服務(wù)的瓦片圖層，緩存的服務(wù)訪問(wèn)緩存中的瓦片，而不是動(dòng)態(tài)地繪制圖像。由于緩存機(jī)制，所以渲染的速度比MapImageLayers快多了，適合疊加瓦片切圖使用，而不是前端動(dòng)態(tài)渲染的。
2.MapImageLayer
MapImageLayer，允許顯示和分析在一個(gè)地圖服務(wù)定義層數(shù)據(jù)，輸出圖像代替特征。地圖服務(wù)圖像是根據(jù)請(qǐng)求動(dòng)態(tài)生成的。
3. ElevationLayer
ElevationLayer,即為加載地形高程的圖層，應(yīng)用在三維模式下顯示。
4. SceneLayer
SceneLayer,即為加載三維場(chǎng)景圖層，應(yīng)用在三維模式下顯示。
5. LayerList
LayerList,圖層列表控制控件，提供了一種方法來(lái)顯示一個(gè)列表的層以及提供控制圖層隱藏或者顯示。
二、LayerList具體實(shí)現(xiàn)思路：
1.上面描述的幾個(gè)類型圖層有個(gè)屬性listMode，默認(rèn)show，即是這些圖層疊加在地圖上，默認(rèn)是在LayerList里面了的，要是LayerList創(chuàng)建的話
image
2.配置圖層信息：
/*圖層配置*/
MapConfig.feconomic_sublayers = [
{id: 35,title:"行政區(qū)劃",visible:false,sublayers:[ {id: 38,title:"城市界線",visible: false},{id: 37,title:"省界",visible: true}]},
{id: 28,title:"海洋規(guī)劃",visible:true,sublayers:[ {id:34,title:"海岸基本功能區(qū) ",visible: true},{id: 33,title:"經(jīng)濟(jì)合作圈",visible: true},{id: 32,title:"經(jīng)濟(jì)發(fā)展區(qū)",visible: true},{id: 31,title:"經(jīng)濟(jì)灣區(qū)",visible:true},{id: 30,title:"經(jīng)濟(jì)島群",visible: true}]},
{id: 27,title:"海域權(quán)屬",visible:false},
{id: 24,title:"岸線資源",visible:false,sublayers:[ {id: 26,title:"海岸帶",visible: true},{id: 25,title:"岸線",visible: true}]},
{id: 14,title:"海洋生態(tài)保護(hù) ",visible:false,sublayers:[
{id:23,title:"海洋功能區(qū)劃 ",visible: true},
{id:22,title:"限制開(kāi)發(fā)區(qū) ",visible: true},
{id:21,title:"禁止開(kāi)發(fā)區(qū) ",visible: true},
{id:18,title:"海洋自然保護(hù)區(qū) ",visible: true,sublayers:[{id:20,title:"海洋自然保護(hù)區(qū) ",visible: true},{id:19,title:"海洋自然保護(hù)區(qū)點(diǎn) ",visible: true}]},
{id:15,title:"海洋特別保護(hù)區(qū) ",visible: true,sublayers:[{id:17,title:"海洋特別保護(hù)區(qū) ",visible: true},{id:16,title:"海洋特別保護(hù)區(qū)點(diǎn) ",visible: true}]}
]},
{id: 9,title:"漁業(yè)資源 ",visible:false,sublayers:[
//{id:13,title:"漁業(yè)資源",visible: false},
{id:12,title:"漁場(chǎng)",visible: true},
{id:11,title:"漁區(qū)",visible: true},
{id:10,title:"漁港",visible: true}
]},
{id: 8,title:"地質(zhì)鉆孔",visible: false},
{id: 7,title:"觀測(cè)站",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:"礦產(chǎn)資源",visible: true}
]},
//{id: 1,title:"海洋企業(yè)",visible:false},
{id: 0,title:"視頻監(jiān)控",visible:false}
];
3.圖層創(chuàng)建：
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創(chuàng)建：
//圖層控制器
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.效果圖如下：
image
三、自定義圖標(biāo)點(diǎn)擊事件管理圖層具體實(shí)現(xiàn)思路：
1.頁(yè)面設(shè)計(jì)：
<div id="tuceng_center">
<ul>
<li id="dynamic_0">
<div class="tucicon tucicon1"></div>
<p>視頻監(jiān)控</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>觀測(cè)站</p>
</li>
<li id="dynamic_8">
<div class="tucicon tucicon5"></div>
<p>地質(zhì)鉆孔</p>
</li>
<li id="dynamic_9">
<div class="tucicon tucicon6"></div>
<p>漁業(yè)資源</p>
</li>
<li id="dynamic_14">
<div class="tucicon tucicon7"></div>
<p>海洋生態(tài)保護(hù)</p>
</li>
<li id="dynamic_24">
<div class="tucicon tucicon8"></div>
<p>岸線資源</p>
</li>
<li id="dynamic_27">
<div class="tucicon tucicon9"></div>
<p>海域權(quán)屬</p>
</li>
<li id="dynamic_28" class="selected">
<div class="tucicon tucicon10"></div>
<p>海洋規(guī)劃</p>
</li>
<li id="dynamic_35">
<div class="tucicon tucicon11"></div>
<p>行政區(qū)劃</p>
</li>
<li id="tile_0">
<div class="tucicon tucicon12"></div>
<p>3D場(chǎng)景</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>
image
image
2.點(diǎn)擊事件：
//圖層控制點(diǎn)擊事件監(jiān)控
$("#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)//動(dòng)態(tài)圖層控制
{
id = id.split("_")[1];
if(feconomicLayer)
feconomicLayer.findSublayerById(Number(id)).visible = flag;
}else{//瓦片底圖控制
id = id.split("_")[1];
switch (id) {
case "0"://3D場(chǎng)景
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.效果圖如下：
image
image
image
GIS之家新博客系列發(fā)布更新在GIS之家網(wǎng)站，歡迎關(guān)注收藏：GIS之家網(wǎng)站
GIS之家作品：GIS之家
GIS之家交流咨詢：咨詢模式
