前言
關於本篇功能實現用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 3.x for js：esri 官網 api，里面詳細的介紹 arcgis api 3.x 各個類的介紹，還有就是在線例子：esri 官網在線例子，這個也是學習 arcgis api 3.x 的好素材。
內容概覽
- 圖層控制功能講解
- 源代碼 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 引用進來：
更多的詳情見：GIS之家小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波