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

2021-07-15 15:18

阅读：607

标签：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 ) {

                    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 = "" +
        "" +
        "";
        if (fields.length > 0) {
            for (var i = 0; i ) {
                html += "" +
                        "" +
                        "" +
                        "";
            }
        }
        html += "" + fields[i].alias + ": " +
       "
";
        html += "
";
        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入门开发系列二十一气泡窗口信息动态配置模板

标签：settime width RKE 修改 value str .com 效果 turn

原文地址：https://www.cnblogs.com/giserhome/p/8945103.html

上一篇：linux和window是文件挂载

下一篇：关闭Windows 系统当前连接的Wifi以及判断物理\虚拟网卡，有线\无线网卡

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：arcgis api for js入门开发系列二十一气泡窗口信息动态配置模板
文章链接：http://soscw.com/essay/105624.html

亲，登录后才可以留言！

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

评论

热门文章

推荐文章

最新文章

置顶文章