arcgis api 3.x for js 入門開發系列二十一氣泡視窗資訊動态配置模闆

前面地圖查詢篇實作圖層查詢query功能，但是查詢結果的氣泡視窗展示資訊是在代碼寫死綁定圖層的字段來的，比如name屬性字段對應的值。但是這種實作方式很不靈活，對于圖層字段不變的情況下或者多個圖層字段名稱都是一緻情況下，還好，代碼也不用變動；要是圖層字段新增或者删除以及多個圖層的字段不一緻情況下，每次改動，查詢結果的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之家小專欄

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

GIS之家作品店鋪：GIS之家作品店鋪

GIS之家源碼咨詢：GIS之家webgis入門開發系列demo源代碼咨詢