Rest服务下，二维地图的加载与图层显隐控制

map2D.JS代码:初始化二维地图，并加载所有其他图层

下方红色"ZHDGX2D"可自定义命名，随便起。红色"mapContainer"为二维地图的div的id 

$(function(){
//一引入该js文件后，页面加载完毕后，直接执行该方法
    init2DMap();
 });
 
// 声明加载二维地图变量，将map设置为全局变量，因为后面图层控制，要从map.layers中取到图层
var map, baseLayer;
//maps后面即为要加载的地图,底图设为常量
const url = "http://172.16.8.123:8099/iserver/services/map-ZHDGX/rest/maps/";
//要叠加的layer图层
const array2DMap = "["PL_YS@PipeLine","PL_TR@PipeLine","PL_GD@PipeLine","PL_JS@PipeLine","PL_WS@PipeLine","PL_XH@PipeLine","PL_DX@PipeLine","PL_LT@PipeLine","PL_YD@PipeLine","PL_JK@PipeLine","PL_DT@PipeLine","PL_LD@PipeLine","PL_RL@PipeLine"]";
// 加载二维地图
 function init2DMap() { 
　　　　　　　　　 map = new SuperMap.Map("mapContainer", { controls: [ new SuperMap.Control.Navigation(),
　　　　　　　　　// 放大缩小控件
                new SuperMap.Control.Zoom(),
　　　　        // 点击地图显示坐标点
                new SuperMap.Control.MousePosition()          
               ]
        });
    // 定义layerWorld图层，获取图层服务地址
    baseLayer = new SuperMap.Layer.TiledDynamicRESTLayer("ZHDGX2D", url+"ZHDGX2D", { transparent : true, cacheEnabled : true }, { maxResolution : "auto" }); // 为图层初始化完毕添加layerInitialized事件 baseLayer.events.on({"layerInitialized":function(){ debugger; addLayer(); debugger;
　　　　//添加所有图层
        addAllRestLayer(array2DMap);
    }});
    
}

function addLayer() {
    debugger;
    //添加底图
    map.addLayer(baseLayer);
    // 设置中心点，缩放比例
    map.setCenter(new SuperMap.LonLat(113.8 , 34.79), 1); 
}


//添加所有管线图层，WMS服务
function addAllRestLayer(layerNames){

    for(var i = 0;i<layerNames.length;i++){
        debugger;
        //循环添加管线图层
        var pipelineLayer = new SuperMap.Layer.TiledDynamicRESTLayer(layerNames[i], url+ layerNames[i], {transparent:true,cacheEnabled:true},{maxResolution:"auto", useCanvas: false, useCORS: true});
        debugger;
        pipelineLayer.isBaseLayer = false;
        map.addLayer(pipelineLayer);
　　　　//设置添加的layer图层为显示
        pipelineLayer.setVisibility(true);
    }
}
 

初始化地图后，在此基础上添加和隐藏图层:

需要注意的几点，

1.想控制的图层要从map.layers中取到。

2.图层加载完毕后，如果要进行隐藏，有两种方法，removeLayer和setVisibility,前者直接移除图层，后者设置为false，即图层不可见，但并不是删除。但是，虽然隐藏可以实现，

但是想要重新显示刚才隐藏的图层就有点尴尬了，重点来了。如果隐藏的时候用第一种方法，直接移除，添加的时候想用addLayer方法，会出现bug，图层并没有明显显示，甚至页面根本没反应。(就算正常出现，来回添加图层，也要消耗内存，会慢，这都是要考虑到的。)

那setVisibility方法怎么样呢，设置为true不就显示了吗？错，因为，你已经移除了图层，页面没有这个图层，所以你没有办法控制。

那么如果，隐藏的时候用第二种方法呢，将图层设置为false，也不行。显示的时候用同方法设置为true还是不灵。

所以终极办法就是，用setOpacity方法，隐藏就把透明度设为0，显示就把透明度设为1。

                       //二维添加图层
                        for (var s = 0; s < map.layers.length; s++) {
                            var layer2D = map.layers[s];
                            var layer2DName = map.layers[s].name;
                            if (layer2DName == "ZHDGX2D") {
                                basic2D = layer2D;
                            }
                            if (name.indexOf(layer2DName) != -1) {
                                // map.removeLayer(layer2D);
                                //layer2D.setVisibility(false);
                                layer2D.setOpacity(1);
                                if (s == map.layers.length) {
                                    // map.removeLayer(basic2D);
                                    //basic2D.setVisibility(false);
                                   //设置为0即为透明度0隐藏，设置为1即为显示
                                    basic2D.setOpacity(1);
                                }
                            }
                        }