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

sinna

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

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

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

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

复制代码

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

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

复制代码

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

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

1. onCheck: function (e, treeId, treeNode) {
   
2.                     if (treeNode.checked) {//勾选状态下,加载底图
   
3.                         if (treeNode.children) { //勾选专题目录
   
4.                             for (var i = 0; i < treeNode.children.length; i++) {
   
5.                                 DCI.Catalog.loadServerTypeMap("mapservice", treeNode.children[i].layerurl, treeNode.children[i].layerid);
   
6.                             }
   
7.                         }
   
8.                         else {//勾选叶节点
   
9.                             DCI.Catalog.loadServerTypeMap("mapservice", treeNode.layerurl, treeNode.layerid);
   
10.                         }
    
11.                     }
    
12.                     else { //去掉勾选框,去掉底图
    
13.                         if (treeNode.children) { //专题目录
    
14.                             for (var i = 0; i < treeNode.children.length; i++) {
    
15.                                 DCI.Catalog.deleteServerTypeMap(treeNode.children[i].layerid);
    
16.                             }
    
17.                         }
    
18.                         else {//叶节点
    
19.                             DCI.Catalog.deleteServerTypeMap(treeNode.layerid);
    
20.                         }
    
21.                     }
    
22.                 }

复制代码

关键两个函数：

1. /**
   
2.      * 删除指定ID的图层
   
3.     */
   
4.     deleteServerTypeMap: function (layerid) {
   
5.         //切换的服务图层对象
   
6.         var curLyr = DCI.Catalog.map.getLayer(layerid);
   
7.         if (curLyr)
   
8.             DCI.Catalog.map.removeLayer(curLyr);
   
9.     }

复制代码

1. /**
   
2.      * 加载不同类型地图服务的底图
   
3.      [url=home.php?mod=space&uid=455428]@[/url] servertype 地图服务类型
   
4.      @ url 地图服务的url
   
5.      @ layerid 地图图层的id
   
6.     */
   
7.     loadServerTypeMap: function (servertype, url, layerid) {
   
8.         var curLyr;//切换的服务图层对象
   
9.         var ids = layerid.replace('layer', '');
   
10.         ids = parseInt(ids);
    
11.         switch (servertype.toLowerCase()) {//统一转换小写判断
    
12.             case 'mapserver_t':
    
13.                 curLyr = new esri.layers.ArcGISTiledMapServiceLayer(url);
    
14.                 curLyr.id = layerid;
    
15.                 break;
    
16.             case 'mapservice':
    
17.                 var imageParameters = new esri.layers.ImageParameters();
    
18.                 imageParameters.layerIds = [ids];
    
19.                 imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;
    
20.                 imageParameters.transparent = true;
    
21.                 curLyr = new esri.layers.ArcGISDynamicMapServiceLayer(url,
    
22.                                                           { "imageParameters": imageParameters });
    
23.                 //curLyr = new esri.layers.ArcGISDynamicMapServiceLayer(url);
    
24.                 curLyr.id = layerid;
    
25.                 break;
    
26.             default://默认
    
27.                 promptdialog("提示信息", "二维地图模式下,勾选图层中出现识别不到的地图服务类型,请检查是否符合正确的地图服务类型标准!");
    
28.                 break;
    
29.         }
    
30.         if (curLyr)
    
31.         DCI.Catalog.map.addLayer(curLyr);
    
32.     },

复制代码

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

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

复制代码

具体实现的详细过程，下载源代码：https://pan.baidu.com/s/1hsHSgYS

GIS之家论坛（推荐）：GIS之家论坛
GitHub:GIS之家GitHub
GIS作品：GIS之家
QQ兴趣部落：GIS之家部落
GIS项目交流群：238339408
GIS之家交流群一：432512093

西九岸

好好学习

359732265

进来看看，学习学习

sskcdn

谢谢楼主分享

hua840209

谢谢分享~！

1107810998

感谢分享，非常感谢！学习了！:bq:bq

hua840209

谢谢分享谢谢分享