地信网论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

免费视频|新人指南|答学员问|投诉删帖

禁止上传涉密资料|赚取铜板|附件下载

查看: 71|回复: 0
收起左侧

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

[复制链接]
发表于 2016-12-14 10:29 | 显示全部楼层 |阅读模式

马上注册地信网,享受更多功能,学习更多知识,成就人生精彩!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
上一篇实现了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. ];
复制代码
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


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

论坛推荐话题上一条 /1 下一条

在线客服

手机版|新人指南|地信论坛 ( 湘ICP备14003170号-5 关于地信 联系方式 邮箱登陆

Powered by Discuz! X3.2

快速回复 返回顶部 返回列表