arcgis api for js入門開發系列七圖層控制

01-31

上一篇實現了demo的地圖分屏對比模塊，本篇新增圖層控制模塊，截圖如下（源代碼見文章底部）：

圖層控制模塊實現的思路如下：

1.在地圖配置文件map.config.js裡面配置圖層目錄樹節點信息，作為主界面圖層控制的數據源：

/*圖層目錄構造*/nMapConfig.zNodes = [n { id: 1, pId: 0, name: "圖層目錄", checked: false, iconOpen: "" + getRootPath() + "Content/images/legend/1_open.png", iconClose: "" + getRootPath() + "Content/images/legend/1_close.png" },n { id: 11, pId: 1, name: "餐飲", layerurl: MapConfig.vecMapUrl, layerid: "layer0", checked: false, icon: "" + getRootPath() + "Content/images/legend/0.png" },n { id: 12, pId: 1, name: "購物", layerurl: MapConfig.vecMapUrl, layerid: "layer1", checked: false, icon: "" + getRootPath() + "Content/images/legend/1.png" },n { id: 13, pId: 1, name: "金融服務", layerurl: MapConfig.vecMapUrl, layerid: "layer2", checked: false, icon: "" + getRootPath() + "Content/images/legend/2.png" },n { id: 14, pId: 1, name: "科研教育", layerurl: MapConfig.vecMapUrl, layerid: "layer3", checked: false, icon: "" + getRootPath() + "Content/images/legend/3.png" },n { id: 15, pId: 1, name: "醫療服務", layerurl: MapConfig.vecMapUrl, layerid: "layer4", checked: false, icon: "" + getRootPath() + "Content/images/legend/4.png" },n { id: 16, pId: 1, name: "住宿", layerurl: MapConfig.vecMapUrl, layerid: "layer5", checked: false, icon: "" + getRootPath() + "Content/images/legend/5.png" }nn];n

2.實現圖層控制功能模塊在map.catalog.js文件以及ztree插件js、css需要在主頁面map.html引用進來：

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

3.map.catalog.js實現圖層控制核心講解：

利用ztree的勾選監聽事件來控制當前圖層的顯示或者不顯示：

onCheck: function (e, treeId, treeNode) {n if (treeNode.checked) {//勾選狀態下,載入底圖n if (treeNode.children) { //勾選專題目錄n for (var i = 0; i < treeNode.children.length; i++) {n DCI.Catalog.loadServerTypeMap("mapservice", treeNode.children[i].layerurl, treeNode.children[i].layerid);n }n }n else {//勾選葉節點n DCI.Catalog.loadServerTypeMap("mapservice", treeNode.layerurl, treeNode.layerid);n }n }n else { //去掉勾選框,去掉底圖n if (treeNode.children) { //專題目錄n for (var i = 0; i < treeNode.children.length; i++) {n DCI.Catalog.deleteServerTypeMap(treeNode.children[i].layerid);n }n }n else {//葉節點n DCI.Catalog.deleteServerTypeMap(treeNode.layerid);n }n }n }n

關鍵兩個函數：

/**n * 刪除指定ID的圖層n */n deleteServerTypeMap: function (layerid) {n //切換的服務圖層對象n var curLyr = DCI.Catalog.map.getLayer(layerid);n if (curLyr)n DCI.Catalog.map.removeLayer(curLyr);n }nn/**n * 載入不同類型地圖服務的底圖n @ servertype 地圖服務類型n @ url 地圖服務的urln @ layerid 地圖圖層的idn */n loadServerTypeMap: function (servertype, url, layerid) {n var curLyr;//切換的服務圖層對象n var ids = layerid.replace(layer, );n ids = parseInt(ids);n switch (servertype.toLowerCase()) {//統一轉換小寫判斷n case mapserver_t:n curLyr = new esri.layers.ArcGISTiledMapServiceLayer(url);n curLyr.id = layerid;n break;n case mapservice:n var imageParameters = new esri.layers.ImageParameters();n imageParameters.layerIds = [ids];n imageParameters.layerOption = esri.layers.ImageParameters.LAYER_OPTION_SHOW;n imageParameters.transparent = true;n curLyr = new esri.layers.ArcGISDynamicMapServiceLayer(url,n { "imageParameters": imageParameters });n //curLyr = new esri.layers.ArcGISDynamicMapServiceLayer(url);n curLyr.id = layerid;n break;n default://默認n promptdialog("提示信息", "二維地圖模式下,勾選圖層中出現識別不到的地圖服務類型,請檢查是否符合正確的地圖服務類型標準!");n break;n }n if (curLyr)n DCI.Catalog.map.addLayer(curLyr);n },n

4.在map.js地圖初始化函數調用即可：

//地圖圖層n var panel2 = DCI.sidebarCtrl.createItem("地圖圖層", "圖層", true, "nav_but_layer", "layermodel");n panel2.append(DCI.Catalog.Html);//載入顯示的內容n DCI.Catalog.Init(map);n

GIS作品：GIS之家

QQ興趣部落：GIS之家部落

GIS項目交流群：238339408

GIS之家交流群一：432512093