前面舆图盘问篇实现图层盘问query成果，但是盘问功效的气泡窗口展示信息是在代码写死绑定图层的字段来的，好比name属性字段对应的值。但是这种实现方法很不灵活，对付图层字段不乱的情况下或者多个图层字段名称都是一致情况下，还好，代码也不用改观；要是图层字段新增或者删除以及多个图层的字段不一致情况下，每次窜改，盘问功效的js代码也要对应的改削，对付维护来说，挺未便利的。所以，本篇优化一下气泡窗口的信息模板，采纳动态可配置化图层字段方法，在配置文件里面配置好图层需要展示的字段模板，，好比在mapconfig文件配置如下：
/*配置气泡窗口模板匹配字段信息*/ MapConfig.fields = { "metro": { simple: [ { field: "Name_CHN", alias: "中文名称" }, { field: "NAME_ENG", alias: "英文名称" }, { field: "Code", alias: "编码" }, { field: "ExitCount", alias: "出口数" } ] } }
效果图如下：
具体的实现思路如下：
1.图层盘问函数：
queryPoints:function(){ var typeUrl = ""; var queryTask = ""; var query = new esri.tasks.Query(); query.returnGeometry = true; query.outFields = ["*"]; query.where = "1=1"; typeUrl = "http://localhost:6080/arcgis/rest/services/gzTest/MapServer/1"; queryTask = new esri.tasks.QueryTask(typeUrl); queryTask.execute(query, function (results) { var symbol = new esri.symbol.PictureMarkerSymbol(getRootPath() + "Content/images/poi/poiLocation.png", 24, 24); if (results.features.length > 0) { var rExtent = null; for (var i = 0; i < results.features.length; i++) { var htmlstr = DCI.poiBusiness.getQueryWinContent(results.features[i].attributes, "metro"); var attr = { "title": "", "content": htmlstr }; var baseGraphic = new esri.Graphic(results.features[i].geometry, symbol, attr); DCI.poiBusiness.graphicslayer.add(baseGraphic); //设置舆图显示范畴 if (rExtent == null) rExtent = baseGraphic._extent; else { rExtent = rExtent.union(baseGraphic._extent); } } DCI.poiBusiness.map.esriMap.setExtent(rExtent.expand(2)); } else { alert("搜索不到相关数据"); } }); },
2.动态配置模板的气泡窗口信息内容模板：
/** * 气泡窗口信息详情模板 */ getQueryWinContent: function (json, pointType) { var html = ""; if (MapConfig.fields[pointType]) var fields = MapConfig.fields[pointType].simple;//默认是配置文件的第一个配置字段列表 else { return html; } html = "<div class=‘inforwin_Container‘ style=‘width:300px;border: 0px solid #ABADCE;‘ id=‘inforwin_Container‘>" + "<div class=‘resource_tit‘ style=‘margin: 0;‘>" + "<table>"; if (fields.length > 0) { for (var i = 0; i < fields.length; i++) { html += "<tr>" + "<td><label>" + fields[i].alias + ":</label></td>" + "<td><input id=‘" + fields[i].field + "‘ type=‘text‘ value=‘" + json[fields[i].field] + "‘ style=‘height:22px;width:200px;margin:1px;‘></input></td>" + "</tr>"; } } html += "</table>" + "</div>"; html += "</div>"; return html; }, /** * 业务标注点-弹出气泡窗口显示详情 */ showQueryGraphicWin: function (graphic) { var pt = graphic.geometry; DCI.poiBusiness.map.esriMap.centerAt(pt); DCI.poiBusiness.map.esriMap.infoWindow.resize(320, 650); DCI.poiBusiness.map.esriMap.infoWindow.setTitle(graphic.attributes.title); DCI.poiBusiness.map.esriMap.infoWindow.setContent(graphic.attributes.content); setTimeout(function () { DCI.poiBusiness.map.esriMap.infoWindow.show(pt); }, 500); },
3.图层的点击事件：