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之家微信号:gishome;GIS之家拥有自己的GIS开发团队,均是高校GIS研究生,具备丰富的webgis开发项目工作经验,专注以及热爱研究webgis技术的团队

发表评论

电子邮件地址不会被公开。 必填项已用*标注