arcgis api for js入门开发系列二十一气泡窗口信息动态配置模板

前面地图查询篇实现图层查询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);
});

GIS之家新博客系列发布更新在GIS之家网站，欢迎关注收藏：GIS之家网站 
GIS之家作品：GIS之家 
GIS之家交流咨询：咨询模式