ArcGIS API for JS starter Development Series 21 Bubble window information Dynamic configuration template

In the previous map query, the query query function is implemented, but the Bubble window display information of the query results is in the field of the code to write the dead bound layer, such as the value of the Name attribute field. However, this implementation is very inflexible, for the layer field is not changed, or if multiple layer field names are consistent, fortunately, the code does not change, if the Layer field is new or deleted and the fields of multiple layers are inconsistent, each change, the query results of the JS code to the corresponding modification, for maintenance , very inconvenient. So, this article optimizes the information template of the Bubble window, takes the dynamic configurable layer field, configures the field template that the layer needs to show in the configuration file, for example, the Mapconfig file is configured as follows:

/* Configure the Bubble window template to match field information */  = {    "metro": {simple        : [                "Name_chn", alias: "Chinese name" },                "Name_eng ", alias:" English name " },                " code ", Alias:" Encoding " },                " Exitcount ", alias:" Number of Exits " }        ]    }}

As follows:

The specific implementation ideas are as follows:

1. Layer Query function:

Querypoints:function(){        varTypeurl = ""; varQuerytask = ""; varquery =NewEsri.tasks.Query (); Query.returngeometry=true; Query.outfields= ["*"]; Query.where= "1=1"; Typeurl= "HTTP://LOCALHOST:6080/ARCGIS/REST/SERVICES/GZTEST/MAPSERVER/1"; Querytask=NewEsri.tasks.QueryTask (Typeurl); Querytask.execute (Query,function(results) {varSymbol =NewEsri.symbol.PictureMarkerSymbol (Getrootpath () + "Content/images/poi/poilocation.png", 24, 24); if(Results.features.length > 0) {                varRextent =NULL;  for(vari = 0; i < results.features.length; i++) {                    varHtmlstr = DCI.poiBusiness.getQueryWinContent (results.features[i].attributes, "Metro"); varattr = {"title": "", "content": Htmlstr}; varBasegraphic =NewESRI.                    Graphic (results.features[i].geometry, symbol, attr);                    DCI.poiBusiness.graphicslayer.add (basegraphic); //set the map display range                    if(Rextent = =NULL) Rextent=basegraphic._extent; Else{rextent=rextent.union (basegraphic._extent); }} DCI.poiBusiness.map.esriMap.setExtent (Rextent.expand (2)); } Else{alert ("No related data found");    }        }); },

2. Dynamic Configuration template Bubble window information content Template:

    /** Bubble window information details template*/getquerywincontent:function(JSON, Pointtype) {varhtml = ""; if(Mapconfig.fields[pointtype])varFields = Mapconfig.fields[pointtype].simple;//The default is the first Configuration field list for a configuration file        Else {            returnhtml; } 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(vari = 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] + "' sty Le= ' height:22px;width:200px;margin:1px; ' ></input></td> "+" </tr> "; }} HTML+ = "</table>" + "</div>"; HTML+ = "</div>"; returnhtml; },    /** * Business Labeling Point-pop-up bubble window display details*/Showquerygraphicwin:function(graphic) {varPT =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. The layer's Click event:

 This function (event) {            = event.graphic;            DCI.poiBusiness.showQueryGraphicWin (event.graphic);});

ArcGIS API for JS starter Development Series 21 Bubble window information Dynamic configuration template