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);
});

arcgis api for js3.x入门开发系列列表

1. arcgis api离线部署
2. 不同地图服务展示
3. 地图工具栏
4. 地图查询
5. 地图态势标绘
6. 地图分屏对比
7. 图层控制
8. 聚合效果
9. 热力图效果
10. 叠加SHP图层
11. 地图统计图
12. 地图打印（GP服务）
13. 地图最短路径分析
14. 最近设施点路径分析
15. 台风轨迹
16. 迁徙流动图
17. 在线地图（天地图、百度地图、高德地图）
18. 风向流动图
19. 图层在线编辑
20. 打印地图的那些事
21. 气泡窗口信息动态配置模板

干货：

1. 自写算法实现地图量算工具
2. 自定义Navigation控件样式风格
3. 热力图优化篇-不依赖地图服务
4. 实现克里金插值渲染图–不依赖GP服务
5. echarts开源js库实现地图统计图分析