1、调整图层列表功能，增加离线影像服务图层相关处理

src/widgets/BaseMap/Widget.ts

@@ -9,7 +9,7 @@ import TDTLayer = require('Esri_Extjs/TDTLayer');
 import TDTAnnoLayer = require('Esri_Extjs/TDTAnnoLayer');
 import TDTImgAnnoLayer = require('Esri_Extjs/TDTImgAnnoLayer');
 import TDTImgLayer = require('Esri_Extjs/TDTImgLayer');
-import SpatialReference =require("esri/SpatialReference");
+import SpatialReference = require("esri/SpatialReference");
 
 export = BaseMap;
 
@@ -72,7 +72,7 @@ class BaseMap extends BaseWidget {
     * @return {(Map)} (返回一个Map对象)
     */
     addToMap() {
-        var map = new Map(this.config.mapDiv, { logo: false, showLabels: true, showAttribution: false, slider: false});
+        var map = new Map(this.config.mapDiv, { logo: false, showLabels: true, showAttribution: false, slider: false });
         //添加对应图层到map对象
         for (var i = 0; i < this.config.mapService.length; i++) {
             var layername = this.config.mapService[i];
@@ -80,7 +80,7 @@ class BaseMap extends BaseWidget {
                 for (var index = 0; index < this.AppX.appConfig.gisResource[layername].config.length; index++) {
                     var url = this.AppX.appConfig.gisResource[layername].config[index].url;
                     var layerAlias = this.AppX.appConfig.gisResource[layername].config[index].name;
-                    if (this.AppX.appConfig.gisResource[layername].type == "tiled"&&url.trim()&&layerAlias.trim()) {
+                    if (this.AppX.appConfig.gisResource[layername].type == "tiled" && url.trim() && layerAlias.trim()) {
                         var tileLayer = new ArcGISTiledMapServiceLayer(url, { className: "tileLayer" });
                         tileLayer.id = layername + "_" + index;
                         if (this.config.baselayers.indexOf(layername) != -1) {//基础底图放置在最下层
@@ -99,34 +99,34 @@ class BaseMap extends BaseWidget {
                         if (layername == "pipe")
                             tileLayer.on("load", this.onPipeLayerLoad.bind(this));
                     } else if (this.AppX.appConfig.gisResource[layername].type == "dynamic") {
-                        if(layername=="tian_online_raster"){//天地图影像
+                        if (layername == "tian_online_raster") {//天地图影像
                             var tdbaselayer1 = new TDTImgLayer();
-                            tdbaselayer1.id="tian_online_raster";   
-                            tdbaselayer1.visible =true;                       
+                            tdbaselayer1.id = "tian_online_raster";
+                            tdbaselayer1.visible = true;
                             map.addLayer(tdbaselayer1);
-                        }else if(layername=="tian_online_vector"){//天地图矢量
+                        } else if (layername == "tian_online_vector") {//天地图矢量
                             var tdbaselayer = new TDTLayer();
-                            tdbaselayer.id="tian_online_vector";
-                            tdbaselayer.visible =true;
+                            tdbaselayer.id = "tian_online_vector";
+                            tdbaselayer.visible = true;
                             map.addLayer(tdbaselayer);
-                        }else if(layername=="tian_online_vector_l"){//天地图矢量标注
+                        } else if (layername == "tian_online_vector_l") {//天地图矢量标注
                             var tdanolayer = new TDTAnnoLayer();
-                            tdanolayer.id="tian_online_vector_l";
-                            tdanolayer.visible =true;
+                            tdanolayer.id = "tian_online_vector_l";
+                            tdanolayer.visible = true;
                             map.addLayer(tdanolayer);
-                        }else if(layername=="tian_online_raster_l"){//天地图影像标注
+                        } else if (layername == "tian_online_raster_l") {//天地图影像标注
                             var tdanolayer = new TDTImgAnnoLayer();
-                            tdanolayer.id="tian_online_raster_l";
-                            tdanolayer.visible =true;
+                            tdanolayer.id = "tian_online_raster_l";
+                            tdanolayer.visible = true;
                             map.addLayer(tdanolayer);
-                        }else{
-                            if(url){
+                        } else {
+                            if (url) {
                                 var dynamicLayer = new ArcGISDynamicMapServiceLayer(url, { className: "dynamicLayer" });
                                 dynamicLayer.id = layername + "_" + index;
                                 if (this.AppX.appConfig.gisResource[layername].filter) {
                                     this.setLayerFilter(dynamicLayer, layerAlias);
                                 }
-                                if(this.AppX.appConfig.gisResource[layername].visiableLayers){
+                                if (this.AppX.appConfig.gisResource[layername].visiableLayers) {
                                     dynamicLayer.setVisibleLayers(this.AppX.appConfig.gisResource[layername].visiableLayers);
                                 }
                                 map.addLayer(dynamicLayer);
@@ -386,37 +386,37 @@ class BaseMap extends BaseWidget {
     }
 
     initLegend(map) {
-        let layerName=this.map.layerIds.filter(e=>{
-            return e.indexOf("pipe")!=-1;
+        let layerName = this.map.layerIds.filter(e => {
+            return e.indexOf("pipe") != -1;
         })
-        let dom=$(".theMapLegendSet");
-        if(layerName.length>0){
-            let pipeLayer=[];
-            layerName.forEach(e=>{
-                let info={
-                    layer:this.map.getLayer(e),
-                    defaultSymbol:true,
-                    title:"图例："
+        let dom = $(".theMapLegendSet");
+        if (layerName.length > 0) {
+            let pipeLayer = [];
+            layerName.forEach(e => {
+                let info = {
+                    layer: this.map.getLayer(e),
+                    defaultSymbol: true,
+                    title: "图例："
                 }
                 pipeLayer.push(info);
             });
             var legend = new Legend({
                 map: map,
-                layerInfos:pipeLayer
+                layerInfos: pipeLayer
             }, "theMapLegend");
             legend.startup();
-            dom.find(".hideAndShow").click(e=>{
-                if($(e.currentTarget).hasClass("glyphicon-resize-small")){
+            dom.find(".hideAndShow").click(e => {
+                if ($(e.currentTarget).hasClass("glyphicon-resize-small")) {
                     dom.addClass('hide');
                     $(e.currentTarget).removeClass("glyphicon-resize-small").addClass("glyphicon-resize-full");
-                    $(e.currentTarget).attr("title",'点击显示图例');
-                }else{
+                    $(e.currentTarget).attr("title", '点击显示图例');
+                } else {
                     dom.removeClass('hide');
                     $(e.currentTarget).removeClass("glyphicon-resize-full").addClass("glyphicon-resize-small");
-                    $(e.currentTarget).attr("title",'点击隐藏图例');
+                    $(e.currentTarget).attr("title", '点击隐藏图例');
                 }
             })
-        }else{
+        } else {
             dom.remove();
         }
     }

src/widgets/BaseMap/config.json

@@ -4,7 +4,10 @@
     "styleUrl":"widgets/BaseMap/css/style.css",
     "mapDiv": "myMap",
     "mapService": [
-        "tian_online_vector","tian_online_vector_l","pipe","poi"
+         "tian_online_vector", "tian_online_vector_l", "pipe", "poi"
     ],
+    "mapService2": [
+        "raster",  "pipe", "poi"
+   ],
     "baselayers":["base"]
 }

src/widgets/LayerList/Widget.ts

@@ -189,70 +189,189 @@ class LayerList extends BaseWidget {
                     if (url.substring(url.lastIndexOf("/") + 1, url.length) != "MapServer") {
                         BaseUrl = url.substring(0, url.lastIndexOf("/"));
                     }
-                    else{
+                    else {
                         BaseUrl = url;
                     }
-                    if(!BaseUrl){
-                        BaseUrl=url;
+                    if (!BaseUrl) {
+                        BaseUrl = url;
                     }
                 }
                 if (url.substring(url.lastIndexOf("/") + 1, url.length) != "MapServer") {
                     var id = parseInt(url.substring(url.lastIndexOf("/") + 1, url.length));
-                    if(id===id){
+                    if (id === id) {
                         sublayerid.push(id);
                     }
                 }
             }
-
         }
+
         if (layer) {
-            this.updateLayerVisibility(BaseUrl, sublayerid, layer.type, checked);
-            if(BaseUrl=="tian_online_vector"||BaseUrl=="tian_online_raster"){
-                this.updateLayerVisibility(BaseUrl+"_l", sublayerid, layer.type, checked);
+            this.updateLayerVisibility(BaseUrl, sublayerid, layer.type, checked, dataIdx);
+            if (BaseUrl == "tian_online_vector" || BaseUrl == "tian_online_raster") {
+                this.updateLayerVisibility(BaseUrl + "_l", sublayerid, layer.type, checked);
             }
         }
+
         //影像图层和地形图层互斥
         if (checked == true) {
             var nodes = this.treeObj.getNodes()
             if (layer.id == "raster") {
-                var node = nodes.filter(function (item) { return item.layerid == "terrain" })[0]
-                if (node != null) {
-                    node.checked = false;
-                    this.treeObj.updateNode(node, false)
-                    var layerinfo = JSON.parse(node.layerinfo)
-                    this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false)
-                }
+                // var node = nodes.filter(function (item) { return item.layerid == "terrain" })[0]
+                // if (node != null) {
+                //     node.checked = false;
+                //     this.treeObj.updateNode(node, false)
+                //     var layerinfo = JSON.parse(node.layerinfo)
+                //     this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false)
+                // }
+
+                // var hideLayerIds = ["terrain", "tian_online_vector", "tian_online_raster"];
+                // $.each(hideLayerIds, function (index, layerIdItem) {
+                //     var node = nodes.filter(function (item) { return item.layerid == layerIdItem })[0]
+                //     if (node != null) {
+                //         node.checked = false;
+                //         this.treeObj.updateNode(node, false)
+                //         var layerinfo = JSON.parse(node.layerinfo)
+                //         // this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
+                //         // this.updateLayerVisibility(layerinfo.url + "_l", sublayerid, layerinfo.type, false);
+
+                //         if (layerIdItem.indexOf('tian_online_') > -1) {
+                //             var layer = this.findLayerInMap(layerinfo.url);
+                //             if (layer) {
+                //                 this.map.removeLayer(layer);//删除隐藏的图层
+                //             }
+
+                //             layer = this.findLayerInMap(layerinfo.url + "_l");
+                //             if (layer) {
+                //                 this.map.removeLayer(layer);//删除隐藏的图层
+                //             }
+                //         } else{
+                //             this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
+                //         }
+                //     }
+                // }.bind(this));
+                this.hideLayers(['terrain', 'tian_online_vector', 'tian_online_raster'], sublayerid);
             }
             else if (layer.id == "terrain") {
-                var node = nodes.filter(function (item) { return item.layerid == "raster" })[0]
-                if (node != null) {
-                    node.checked = false;
-                    this.treeObj.updateNode(node, false)
-                    var layerinfo = JSON.parse(node.layerinfo)
-                    this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
-                }
-            }else if(layer.id=="tian_online_raster"){
-                var node = nodes.filter(function (item) { return item.layerid == "tian_online_vector" })[0]
-                if (node != null) {
-                    node.checked = false;
-                    this.treeObj.updateNode(node, false)
-                    var layerinfo = JSON.parse(node.layerinfo)
-                    this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
-                    this.updateLayerVisibility(layerinfo.url+"_l", sublayerid, layer.type, false);
-                }
+                // var node = nodes.filter(function (item) { return item.layerid == "raster" })[0]
+                // if (node != null) {
+                //     node.checked = false;
+                //     this.treeObj.updateNode(node, false)
+                //     var layerinfo = JSON.parse(node.layerinfo)
+                //     this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
+                // }
 
-            }else if(layer.id=="tian_online_vector"){
-                var node = nodes.filter(function (item) { return item.layerid == "tian_online_raster" })[0]
-                if (node != null) {
-                    node.checked = false;
-                    this.treeObj.updateNode(node, false)
-                    var layerinfo = JSON.parse(node.layerinfo)
-                    this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
-                    this.updateLayerVisibility(layerinfo.url+"_l", sublayerid, layer.type, false);
-                }
+                // var hideLayerIds = ["raster", "tian_online_vector", "tian_online_raster"];
+                // $.each(hideLayerIds, function (index, layerIdItem) {
+                //     var node = nodes.filter(function (item) { return item.layerid == layerIdItem })[0]
+                //     if (node != null) {
+                //         node.checked = false;
+                //         this.treeObj.updateNode(node, false)
+                //         var layerinfo = JSON.parse(node.layerinfo)
+                //         // this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
+                //         // this.updateLayerVisibility(layerinfo.url + "_l", sublayerid, layerinfo.type, false);
+
+                //         if (layerIdItem.indexOf('tian_online_') > -1) {
+                //             var layer = this.findLayerInMap(layerinfo.url);
+                //             if (layer) {
+                //                 this.map.removeLayer(layer);//删除隐藏的图层
+                //             }
+
+                //             layer = this.findLayerInMap(layerinfo.url + "_l");
+                //             if (layer) {
+                //                 this.map.removeLayer(layer);//删除隐藏的图层
+                //             }
+                //         } else{
+                //             this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
+                //         }
+                //     }
+                // }.bind(this));
+                this.hideLayers(['raster', 'tian_online_vector', 'tian_online_raster'], sublayerid);
+            } else if (layer.id == "tian_online_raster") {
+                // var node = nodes.filter(function (item) { return item.layerid == "tian_online_vector" })[0]
+                // if (node != null) {
+                //     node.checked = false;
+                //     this.treeObj.updateNode(node, false)
+                //     var layerinfo = JSON.parse(node.layerinfo)
+                //     this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
+                //     this.updateLayerVisibility(layerinfo.url + "_l", sublayerid, layer.type, false);
+                // }
+
+                // var hideLayerIds = ["raster", "terrain", "tian_online_vector"];
+                // $.each(hideLayerIds, function (index, layerIdItem) {
+                //     var node = nodes.filter(function (item) { return item.layerid == layerIdItem })[0]
+                //     if (node != null) {
+                //         node.checked = false;
+                //         this.treeObj.updateNode(node, false)
+                //         var layerinfo = JSON.parse(node.layerinfo)
+                //         // this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
+                //         // this.updateLayerVisibility(layerinfo.url + "_l", sublayerid, layerinfo.type, false);
+
+                //         if (layerIdItem.indexOf('tian_online_') > -1) {
+                //             this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
+                //             this.updateLayerVisibility(layerinfo.url + "_l", sublayerid, layerinfo.type, false);
+                //         } else {
+                //             var layer = this.findLayerInMap(layerinfo.url);
+                //             if (layer) {
+                //                 this.map.removeLayer(layer);//删除隐藏的图层
+                //             }
+                //         }
+                //     }
+                // }.bind(this));
+                this.hideLayers(['raster', 'terrain', 'tian_online_vector'], sublayerid);
+            } else if (layer.id == "tian_online_vector") {
+                // var node = nodes.filter(function (item) { return item.layerid == "tian_online_raster" })[0]
+                // if (node != null) {
+                //     node.checked = false;
+                //     this.treeObj.updateNode(node, false)
+                //     var layerinfo = JSON.parse(node.layerinfo)
+                //     this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
+                //     this.updateLayerVisibility(layerinfo.url + "_l", sublayerid, layer.type, false);
+                // }
+
+                // var hideLayerIds = ["raster", "terrain", "tian_online_raster"];
+                // $.each(hideLayerIds, function (index, layerIdItem) {
+                //     var node = nodes.filter(function (item) { return item.layerid == layerIdItem })[0]
+                //     if (node != null) {
+                //         node.checked = false;
+                //         this.treeObj.updateNode(node, false)
+                //         var layerinfo = JSON.parse(node.layerinfo)
+                //         // this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
+                //         // this.updateLayerVisibility(layerinfo.url + "_l", sublayerid, layerinfo.type, false);
+
+                //         if (layerIdItem.indexOf('tian_online_') > -1) {
+                //             this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
+                //             this.updateLayerVisibility(layerinfo.url + "_l", sublayerid, layerinfo.type, false);
+                //         } else {
+                //             var layer = this.findLayerInMap(layerinfo.url);
+                //             if (layer) {
+                //                 this.map.removeLayer(layer);//删除隐藏的图层
+                //             }
+                //         }
+                //     }
+                // }.bind(this));
+                this.hideLayers(['raster', 'terrain', 'tian_online_raster'], sublayerid);
             }
         }
     };
+    /**
+    * @function 隐藏指定Id的图层
+    * @param layerIds 
+    */
+    private hideLayers(layerIds: any[], sublayerid: any[]) {
+        var nodes = this.treeObj.getNodes()
+        var nodes2 = nodes.filter(function (item) { return layerIds.indexOf(item.layerid) > -1 });
+        if (nodes2 != null) {
+            $.each(nodes2, function (index, node2) {
+                node2.checked = false;
+                this.treeObj.updateNode(node2, false);
+                var layerinfo = JSON.parse(node2.layerinfo);
+                this.updateLayerVisibility(layerinfo.url, [], layerinfo.type, false);
+                if (layerinfo.id.indexOf("tian_online") > -1) {//在线天地图服务图层的特殊处理
+                    this.updateLayerVisibility(layerinfo.url + "_l", sublayerid, layerinfo.type, false);
+                }
+            }.bind(this));
+        }
+    }
     private onLayerClick(event, treeId, treeNode) {
         if (treeNode.isParent) {
             this.treeObj.expandNode(treeNode, null, false, true, true);
@@ -262,8 +381,16 @@ class LayerList extends BaseWidget {
         }
 
     };
-    private updateLayerVisibility(url, sublayerid, type, visible) {
-        if (this.map&&url) {
+    /**
+     * 
+     * @param url 
+     * @param sublayerid 
+     * @param type 
+     * @param visible 
+     * @param layerId 
+     */
+    private updateLayerVisibility(url, sublayerid, type, visible, layerId = '') {
+        if (this.map && url) {
             var layer = this.findLayerInMap(url);
             if (layer != null) {
                 if (sublayerid === undefined || sublayerid.length == 0)
@@ -277,29 +404,32 @@ class LayerList extends BaseWidget {
                 }
             }
             else {
-                if(url=="tian_online_raster"){//处理在线天地图影像图
+                if (visible == false) {
+                    return;
+                }
+                if (url == "tian_online_raster") {//处理在线天地图影像图
                     var tdbaselayer1 = new TDTImgLayer();
-                    tdbaselayer1.id="tian_online_raster";   
-                    tdbaselayer1.visible =true;                       
-                    this.map.addLayer(tdbaselayer1,0);//最底层
+                    tdbaselayer1.id = "tian_online_raster";
+                    tdbaselayer1.visible = true;
+                    this.map.addLayer(tdbaselayer1, 0);//最底层
                     var tdanolayer = new TDTImgAnnoLayer();
-                    tdanolayer.id="tian_online_raster_l";
-                    tdanolayer.visible =true;
-                    this.map.addLayer(tdanolayer,1);//第二层
-                }else if(url=="tian_online_vector"){//处理在线天地图矢量图
+                    tdanolayer.id = "tian_online_raster_l";
+                    tdanolayer.visible = true;
+                    this.map.addLayer(tdanolayer, 1);//第二层
+                } else if (url == "tian_online_vector") {//处理在线天地图矢量图
                     var tdbaselayer = new TDTLayer();
-                    tdbaselayer.id="tian_online_vector";
-                    tdbaselayer.visible =true;
-                    this.map.addLayer(tdbaselayer,0);//最底层
+                    tdbaselayer.id = "tian_online_vector";
+                    tdbaselayer.visible = true;
+                    this.map.addLayer(tdbaselayer, 0);//最底层
                     var tdanolayer = new TDTAnnoLayer();
-                    tdanolayer.id="tian_online_vector_l";
-                    tdanolayer.visible =true;
-                    this.map.addLayer(tdanolayer,1);//第二层
-                }else if (url.substring(url.lastIndexOf("/") + 1, url.length) != "MapServer") {
+                    tdanolayer.id = "tian_online_vector_l";
+                    tdanolayer.visible = true;
+                    this.map.addLayer(tdanolayer, 1);//第二层
+                } else if (url.substring(url.lastIndexOf("/") + 1, url.length) != "MapServer") {
                     var baseUrl = url.substring(0, url.lastIndexOf("/"));
                     var id = url.substring(url.lastIndexOf("/") + 1, url.length);
                     sublayerid = [];
-                    if(parseInt(id)===parseInt(id)){
+                    if (parseInt(id) === parseInt(id)) {
                         sublayerid.push(parseInt(id));
                     }
                     this.updateLayerVisibility(baseUrl, sublayerid, type, visible);
@@ -308,6 +438,7 @@ class LayerList extends BaseWidget {
                 else {
                     if (type == "tiled") {
                         layer = new ArcGISTiledMapServiceLayer(url, { className: "tileLayer" });
+                        layer.id = layerId.indexOf('_') > -1 ? layerId : (layerId + "_0");
                         if (this.isBaseLayer(url))
                             this.map.addLayer(layer, 0);
                         else
@@ -516,16 +647,16 @@ class LayerList extends BaseWidget {
         return layers;
     };
     private findLayerInMap(url) {
-        let layer=null;
+        let layer = null;
         for (var i = 0; i < this.map.layerIds.length; i++) {
             const templayer = this.map.getLayer(this.map.layerIds[i]);
-            if (templayer.url && templayer.url == url){
-                layer=templayer;
+            if (templayer.url && templayer.url == url) {
+                layer = templayer;
                 return layer;
             }
         }
-        if(!layer){
-            layer=this.map.getLayer(url);
+        if (!layer) {
+            layer = this.map.getLayer(url);
             return layer;
         }
         return null;

src/widgets/LayerList/config.json

@@ -1,5 +1,5 @@
 {
     "gridlayer":"",
-    "optionallayers":["optionmap","pipe"],
-    "baselayers":["tian_online_raster","tian_online_vector"]
+    "optionallayers":["optionmap", "pipe"],
+    "baselayers":["tian_online_raster", "tian_online_vector", "raster"]
 }