arcgis api 3.x for js 入門開發系列二十一氣泡窗口信息動態配置模板

前言

關於本篇功能實現用到的 api 涉及類看不懂的，請參照 esri 官網的 arcgis api 3.x for js：esri 官網 api，里面詳細的介紹 arcgis api 3.x 各個類的介紹，還有就是在線例子：esri 官網在線例子，這個也是學習 arcgis api 3.x 的好素材。

前面地圖查詢篇實現圖層查詢 query 功能，但是查詢結果的氣泡窗口展示信息是在代碼寫死綁定圖層的字段來的，比如 name 屬性字段對應的值。但是這種實現方式很不靈活，對於圖層字段不變的情況下或者多個圖層字段名稱都是一致情況下，還好，代碼也不用變動；要是圖層字段新增或者刪除以及多個圖層的字段不一致情況下，每次改動，查詢結果的 js 代碼也要對應的修改，對於維護來說，挺不方便的。所以，本篇優化一下氣泡窗口的信息模板，采取動態可配置化圖層字段方式，在配置文件里面配置好圖層需要展示的字段模板，比如在 mapconfig 文件配置如下：

/*配置氣泡窗口模板匹配字段信息*/
MapConfig.fields = {
"metro": {
simple: [
{ field: "Name_CHN", alias: "中文名稱" },
{ field: "NAME_ENG", alias: "英文名稱" },
{ field: "Code", alias: "編碼" },
{ field: "ExitCount", alias: "出口數" }
]
}
}

效果圖如下：

具體的實現思路

• 圖層查詢函數

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("搜索不到相關數據");
}
});
},

• 動態配置模板的氣泡窗口信息內容模板

/**
* 氣泡窗口信息詳情模板
*/
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;
},
……
……

更多的詳情見：GIS之家小專欄

對本專欄感興趣的話，可以關注一波