arcgis api for js入門開發系列二十一氣泡視窗資訊動態配置模板

標籤：settime   width   RKE   修改   value   str   .com   效果   turn   

前面地圖查詢篇實現圖層查詢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.圖層的點擊事件：

 this.graphicslayer.on("click", function (event) {            DCI.poiBusiness.curGraphic = event.graphic;            DCI.poiBusiness.showQueryGraphicWin(event.graphic);});

arcgis api for js入門開發系列二十一氣泡視窗資訊動態配置模板