arcgis api 4.x for js之圖層管理篇

上篇實現了基礎地圖加載以及二三維模式切換；本篇的內容則是圖層管理控制，從兩個不同角度來實現，分別是直接綁定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.效果圖如下：