Arcgis for JavaScript Featurelayer diagram and property interoperability

Description: The main implementation of loading featurelayer and display attribute table, and implementation of the property sheet and map linkage, first of all, to see the effect of the implementation:

Show effect

As shown, this article mainly realizes the following several functions: 1, the page load and display of the Featurelayer attribute table, 2, the property sheet and map interoperability, including the mouse through the map display name and highlight, click on the list Display object information box, such as:

Show Info box

Below, talk about concrete implementation ideas and code.

1. Obtaining the Featurelayer attribute table

To get the Featurelayer property sheet, first create the Featurelayer object, as follows:

            FTCh = new Featurelayer ("http://localhost:6080/arcgis/rest/services/shpchina/MapServer/0", {                outfields: ["*"]            })            var symbol = new Simplemarkersymbol (Simplemarkersymbol.style_square,                Ten,                new Simplelinesymbol ( Simplelinesymbol.style_solid,                    new Color ([255,0,0]),                    1                ),                new Color ([0,255,0,0.25])            );            Simple Rendering            var  sr = new Simplerenderer (symbol);            Ftch.setrenderer (SR);            Map.addlayer (ftch,1);

With the Featurelayer object, you can get all the records through Ftch.graphics, get to the graphics can get to a single graphic, you can get each graphic attributes, as follows:

                     var graphics=ftch.graphics;                     Console.log (graphics);                     var item = "";                     for (Var i=0;i<graphics.length;i++) {                         var attr = graphics[i].attributes;                         var id=attr. FID, Name=attr.name;                         item+= "{\" id\ ":" +id+ ", \" text\ ": '" +name+ "'},";                     }

2. pagination Display of attribute table

At this point, you can assemble the JSON object for the paging display properties, as follows:

                     var graphics=ftch.graphics;                     Console.log (graphics);                     var item = "";                     for (Var i=0;i<graphics.length;i++) {                         var attr = graphics[i].attributes;                         var id=attr. FID, Name=attr.name;                         item+= "{\" id\ ":" +id+ ", \" text\ ": '" +name+ "'},";                     }                     item = "[" +item.substring (0,ITEM.LENGTH-1) + "]";                     Attr= "{' Total ':" +graphics.length+ ", ' Items ':" +item+ "}";                     Page_data = eval (' (' + attr + ') ');

Display the property sheet pagination, as shown in the post http://blog.csdn.net/gisshixisheng/article/details/40048451.

3. Binding and implementation of each object event

Each display object is a div, to add onclick,onmouseover and onmouseout events to the Div, the three event passes the same parameters, is the index value inside the graphics, followed by the implementation of three events, the detailed code is as follows:

            Showinfo = function (index) {var pt=ftch.graphics[index].geometry;                var attr=ftch.graphics[index].attributes;                Map.infoWindow.setTitle (Attr.name);                Map.infoWindow.setContent (Attr.name);            Map.infoWindow.show (PT);            };                        Showobj = function (index) {var symbol = new Simplemarkersymbol (simplemarkersymbol.style_circle, New Simplelinesymbol (Simplelinesymbol.style_solid, n EW color ([255,0,0]), 1), New color ([255,0,0,                1]));                Ftch.graphics[index].symbol=symbol;                Ftch.redraw ();                var pt=ftch.graphics[index].geometry;                var font = new Esri.symbol.Font ();                Font.setsize ("10pt");           Font.setweight (Esri.symbol.Font.WEIGHT_BOLD);     var text = new Esri.symbol.TextSymbol (ftch.graphics[index].attributes.name);                Text.setalign (Esri.symbol.TextSymbol.ALIGN_START);                Text.setfont (font);                Text.setoffset (2,-15); Text.setcolor (New dojo.                Color ([255,0,0,1])); var labelgraphic = new Esri.                Graphic (Pt,text);            Labellayer.add (labelgraphic);            };                Restoreobj = function (index) {labellayer.clear (); var symbol = new Simplemarkersymbol (Simplemarkersymbol.style_square, ten, new Simplel                    Inesymbol (Simplelinesymbol.style_solid, New Color ([255,0,0]), 1                  ), New Color ([0,255,0,0.25]);                  Ftch.graphics[index].symbol=symbol;            Ftch.redraw ();        }; });

Showinfo corresponding to the Click event, showobject corresponds to the mouse through the event, restoreobj corresponding to the mouse removal event, so basic and can be achieved. The detailed code is as follows:

Map.html

<! DOCTYPE html>
Page.css
. page_item{    background: #C9DCD7;    width:170px;    Text-align:left;    padding-left:10px;    padding-top:3px;    padding-bottom:3px;    border-bottom:1px solid #3CF;}. page_item:hover{    background: #A9C9FA;    Cursor:pointer;} #page_ctrl {    padding-top:5px;}. page_ctrl{    width:40px;    Text-align:center;    Background: #A9C9FA;    Float:left;    margin:2px;    padding-top:5px;    padding-bottom:5px;}. page_ctrl:hover{    background: #C9DCD7;    Cursor:pointer;}
Jquery.page.js
/** * Created by Administrator on 14-10-18.        */(function ($) {$.fn.itempage = function (options) {var defaults = {};        var options = $.extend (defaults, options);        var data=options.data,//data currpage=options.currpage,//The current page pagesize=options.pagesize;//the data entry that is displayed per page        var total=data.total;        var items=$ ("<div id= ' items ' ></div>"), pagectrl=$ ("<div id= ' Page_ctrl ' ></div>"); var first=$ ("<div id=\" first\ "class=\" page_ctrl\ "onclick=\" showpage (' first ') \ "> Home </div>"), Pre  v=$ ("<div id=\" prev\ "class=\" page_ctrl\ "onclick=\" showpage (' prev ') \ "> previous page </div>"), next=$ ("<div  Id=\ "next\" class=\ "page_ctrl\" onclick=\ "showpage (' next ') \" > Next </div> "), last=$ (" <div id=\ "last\"        Class=\ "page_ctrl\" onclick=\ "showpage (' last ') \" > End </div> ");        var start=getstartindex (), End=getendindex ();   for (Var i=start;i<end;i++) {         var itemi=$ ("<div class= ' page_item ' onclick= ' Showinfo (" +i+ ") ' onmouseout= ' Restoreobj (" +i+ ") ' onmouseover= ' show            OBJ ("+i+") ' > ' +data.items[i].text+ ' </div> ');        Items.append (Itemi); } pagectrl.append (first), Pagectrl.append (prev), Pagectrl.append (next) pagectrl.append        (last);        var container = $ (this);        Container.append (items), container.append (PageCtrl);        function Getstartindex () {return (currpage-1) *pagesize;            } function Getendindex () {var endindex=0;            if (data.total%pagesize!=0 && currpage==getlastpage ()) {endIndex = Data.total;            } else {endIndex = currpage*pagesize;        } return EndIndex; }}) (JQuery);
To this function basically completed, a lot to be optimized, but also hope to continue to focus on Lzugis's ArcGIS for JavaScript series blog, your support is my motivation, thank you.
qq:1004740957
Mail:[email protected]



Arcgis for JavaScript Featurelayer diagram and property interoperability