前言

关于本篇功能实现用到的 api 涉及类看不懂的，请参照 esri 官网的 arcgis api 3.x for js：，里面详细的介绍 arcgis api 3.x 各个类的介绍，还有就是在线例子：，这个也是学习 arcgis api 3.x 的好素材。

内容概览

1. 图层控制功能讲解
2. 源代码 demo 下载

本篇实现图层控制功能模块，截图如下：

图层控制模块实现的思路

在地图配置文件 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" } ];

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

更多的详情见：

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波