arcgis api for js入门开发系列七图层控制(含源代码)

上一篇实现了demo的地图分屏对比模块，本篇新增图层控制模块，截图如下（源代码见文章底部）：

 

图层控制模块实现的思路如下：

1.在地图配置文件map.config.js里面配置图层目录树节点信息，作为主界面图层控制的数据源：

/*图层目录构造*/
MapConfig.zNodes = [
    { id: 1, pId: 0, name: "图层目录", checked: false, iconOpen: "" + getRootPath() + "Content/images/legend/1_open.png", iconClose: "" + getRootPath() + "Content/images/legend/1_close.png" },
    { id: 11, pId: 1, name: "餐饮", layerurl: MapConfig.vecMapUrl, layerid: "layer0", checked: false, icon: "" + getRootPath() + "Content/images/legend/0.png" },
    { id: 12, pId: 1, name: "购物", layerurl: MapConfig.vecMapUrl, layerid: "layer1", checked: false, icon: "" + getRootPath() + "Content/images/legend/1.png" },
    { id: 13, pId: 1, name: "金融服务", layerurl: MapConfig.vecMapUrl, layerid: "layer2", checked: false, icon: "" + getRootPath() + "Content/images/legend/2.png" },
    { id: 14, pId: 1, name: "科研教育", layerurl: MapConfig.vecMapUrl, layerid: "layer3", checked: false, icon: "" + getRootPath() + "Content/images/legend/3.png" },
    { id: 15, pId: 1, name: "医疗服务", layerurl: MapConfig.vecMapUrl, layerid: "layer4", checked: false, icon: "" + getRootPath() + "Content/images/legend/4.png" },
    { id: 16, pId: 1, name: "住宿", layerurl: MapConfig.vecMapUrl, layerid: "layer5", checked: false, icon: "" + getRootPath() + "Content/images/legend/5.png" }

];

2.实现图层控制功能模块在map.catalog.js文件以及ztree插件js、css需要在主页面map.html引用进来：

<script type="text/javascript" src="js/main/map.catalog.js"></script>
<link href="js/plugins/ztree/zTreeStyle/img/zTreeStyle.css" rel="stylesheet" />
<script src="js/plugins/ztree/jquery.ztree.min.js"></script>

3.map.catalog.js实现图层控制核心讲解：

利用ztree的勾选监听事件来控制当前图层的显示或者不显示：

                onCheck: function (e, treeId, treeNode) {
                    if (treeNode.checked) {//勾选状态下,加载底图
                        if (treeNode.children) { //勾选专题目录
                            for (var i = 0; i < treeNode.children.length; i++) {
                                DCI.Catalog.loadServerTypeMap("mapservice", treeNode.children[i].layerurl, treeNode.children[i].layerid);
                            }
                        }
                        else {//勾选叶节点
                            DCI.Catalog.loadServerTypeMap("mapservice", treeNode.layerurl, treeNode.layerid);
                        }
                    }
                    else { //去掉勾选框,去掉底图
                        if (treeNode.children) { //专题目录
                            for (var i = 0; i < treeNode.children.length; i++) {
                                DCI.Catalog.deleteServerTypeMap(treeNode.children[i].layerid);
                            }
                        }
                        else {//叶节点
                            DCI.Catalog.deleteServerTypeMap(treeNode.layerid);
                        }
                    }
                }

关键两个函数：

    /**
     * 删除指定ID的图层
    */
    deleteServerTypeMap: function (layerid) {
        //切换的服务图层对象
        var curLyr = DCI.Catalog.map.getLayer(layerid);
        if (curLyr)
            DCI.Catalog.map.removeLayer(curLyr);
    }

    /**
     * 加载不同类型地图服务的底图
     @ servertype 地图服务类型
     @ url 地图服务的url
     @ layerid 地图图层的id
    */
    loadServerTypeMap: function (servertype, url, layerid) {
        var curLyr;//切换的服务图层对象
        var ids = layerid.replace('layer', '');
        ids = parseInt(ids);
        switch (servertype.toLowerCase()) {//统一转换小写判断
            case 'mapserver_t':
                curLyr = new esri.layers.ArcGISTiledMapServiceLayer(url);
                curLyr.id = layerid;
                break;
            case 'mapservice':
                var imageParameters = new esri.layers.ImageParameters();
                imageParameters.layerIds = [ids];
                imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
                imageParameters.transparent = true;
                curLyr = new esri.layers.ArcGISDynamicMapServiceLayer(url,
                                                          { "imageParameters": imageParameters });
                //curLyr = new esri.layers.ArcGISDynamicMapServiceLayer(url);
                curLyr.id = layerid;
                break;
            default://默认
                promptdialog("提示信息", "二维地图模式下,勾选图层中出现识别不到的地图服务类型,请检查是否符合正确的地图服务类型标准!");
                break;
        }
        if (curLyr)
        DCI.Catalog.map.addLayer(curLyr);
    },

4.在map.js地图初始化函数调用即可：

    //地图图层
    var panel2 = DCI.sidebarCtrl.createItem("地图图层", "图层", true, "nav_but_layer", "layermodel");
    panel2.append(DCI.Catalog.Html);//加载显示的内容
    DCI.Catalog.Init(map);