Arcgis for Javascript: featureLayer diagram and attribute interoperability

Arcgis for Javascript: featureLayer diagram and attribute interoperability

Note:It mainly loads FeatureLayer and displays attribute tables, and achieves association between attribute tables and maps. First, let's look at the effect after implementation:

Display Effect

As shown in, this article mainly implements the following functions: 1. Paging loading and display of FeatureLayer attribute tables; 2. Interoperability Between attribute tables and maps, displays the information boxes of objects on the map with names highlighted and clicked when the cursor passes, such:

Show information box

Next, let's talk about the specific implementation ideas and code.

1. Obtain the FeatureLayer Attribute Table

To obtain the Attribute Table of FeatureLayer, you must first create a FeatureLayer object, as shown below:

Ftch = new FeatureLayer ("http: // localhost: 6080/arcgis/rest/services/shpchina/MapServer/0", {outFields: ["*"]}) var symbol = new SimpleMarkerSymbol (SimpleMarkerSymbol. STYLE_SQUARE, 10, new SimpleLineSymbol (SimpleLineSymbol. STYLE_SOLID, new Color ([0,255, 0, 0]), 1), new Color ([0.25, 0,]); // simple rendering var sr = new SimpleRenderer (symbol); ftch. setRenderer (sr); map. addLayer (ftch, 1 );

With the FeatureLayer object, you can use ftch. graphics to obtain all the records and obtain graphics to obtain a single graphic. Then, you can obtain the attributes of each graphic, as shown below:

Var graphics = ftch. graphics; console. log (graphics); var item = ""; for (var I = 0; I
 
  

  
2. pagination of attribute tables
In this case, the json object of the pagination display attribute can be assembled as follows:
  

  
Var graphics = ftch. graphics; console. log (graphics); var item = ""; for (var I = 0; I
   
    
Display the Attribute Table by page, as shown in blog http://blog.csdn.net/gisshixisheng/article/details/40048451.
    

    

    
3. Binding and implementation of each object event
    
Each Display object is a div that adds onclick, onmouseover and onmouseout events to the div respectively. The parameters passed by the three events are the same, which is the index value in graphics, the following code implements three events:
    

    
            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,                        12,                        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,                                new 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,                    10,                    new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,                        new Color([255,0,0]),                        1                    ),                    new Color([0,255,0,0.25])                  );                  ftch.graphics[index].symbol=symbol;                  ftch.redraw();            };        });
ShowInfo corresponds to the click event, showObject corresponds to the mouse over the event, and restoreObj corresponds to the mouse removal event, which is basically implemented. The Code is as follows:
    

    
Map.html
    

    
    
         
         Simple Map    
         
         <Script src = "http: // localhost/arcgis_js_api/library/3.9/3.9/init. js "> </script> <script src =" jquery-1.8.3.js "> </script> <script src =" jquery. page. js "> </script> <script> var map, mapCenter, ftch; var PAGE_DATA, currpage = 1, pagesize = 5; var showInfo, showObj, restoreObj; require (["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/FeatureLayer", "esri/layers/GraphicsLayer", "esri/geomet Ry/Point "," esri/symbols/SimpleMarkerSymbol "," esri/symbols/SimpleLineSymbol "," esri/renderers/SimpleRenderer "," dojo/_ base/Color ", "dojo/on", "dojo/dom", "dojo/domReady! "], Function (Map, Tiled, FeatureLayer, GraphicsLayer, Point, SimpleMarkerSymbol, SimpleLineSymbol, SimpleRenderer, Color, on, dom) {map = new Map (" map ", {logo: false, slider: true}); var tiled = new Tiled ("http: // localhost: 6080/arcgis/rest/services/chinamap/MapServer"); map. addLayer (tiled, 0); ftch = new FeatureLayer ("http: // localhost: 6080/arcgis/rest/services/shpchina/MapServer/0", {outFields: ["*"]}) var symbol = new SimpleMarkerSymbol (SimpleMarkerSymbol. STYLE_SQUARE, 10, new SimpleLineSymbol (SimpleLineSymbol. STYLE_SOLID, new Color ([0,255, 0, 0]), 1), new Color ([0.25, 0,]); // simple rendering var sr = new SimpleRenderer (symbol); ftch. setRenderer (sr); map. addLayer (ftch, 1); var labelLayer = new GraphicsLayer (); map. addLayer (labelLayer, 2); mapCenter = new Point (103.847, 36.0473, map. spatialReference); map. centerAndZoom (mapCenter, 4); var navToolbar = new esri. toolbars. navigation (map); on (dom. byId ("full_extent"), "click", function (event) {// full map. centerAndZoom (mapCenter, 4) ;}); on (dom. byId ("zoom_in"), "click", function (event) {// enlarge the map by pulling the box. setMapCursor ("url (cursor/zoom-in.cur), auto"); navToolbar. activate (esri. toolbars. navigation. ZOOM_IN);}); on (dom. byId ("zoom_out"), "click", function (event) {// zoom out the map in the drop-down box. setMapCursor ("url (cursor/zoom-out.cur), auto"); navToolbar. activate (esri. toolbars. navigation. ZOOM_OUT) ;}); navToolbar. on ("extent-history-change", function () {map. setMapCursor ("default"); navToolbar. deactivate () ;}); on (dom. byId ("attr_ctrl"), "click", function (event) {// display or hide the Attribute Table if ($ (". attr_ctrl ").html () =" display attributes ") {var graphics = ftch. graphics; console. log (graphics); var item = ""; for (var I = 0; I
     
      
1) {currpage = currpage-1;} else {alert ("no previous page! ");} Break;} case" next ": {// if (currpage! = GetLastPage () {currpage = currpage + 1;} else {alert ("no more pages! ");} Break;} case" last ": {// currpage = getLastPage (); break;} default: {currpage = 1; // The first page of break ;}} loadPages (currpage) ;}; function getLastPage () {var total = PAGE_DATA.total; if (total % pagesize = 0) {return total/pagesize;} else {return parseInt (total/pagesize) + 1 ;}</script>Zoom in on the full graph and zoom out the display attributes.
     
    

    
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 var total = data displayed on each page. total; var items = $ (""), pagectrl = $ (""); var first = $ ("first page"), prev = $ ("Previous Page "), next = $ ("next page"), last = $ ("last page"); var start = getStartindex (), end = getEndindex (); for (var I = start; I
     
      
This function has basically been completed, and many of them need to be optimized. I hope to continue to pay attention to the series of LZUGIS Arcgis for Javascript blogs. Your support is my motivation. Thank you.
      
QQ: 1004740957
      
Mail: niujp08@qq.com