說明：主要實現載入FeatureLayer與顯示屬性表，並實現屬性表與地圖的聯動，首先，看看實現後的效果：

顯示效果

如上圖所示，本文章主要實現了以下幾個功能：1、FeatureLayer屬性表的分頁載入與顯示；2、屬性表和地圖的互操作，包括滑鼠經過時在地圖上顯示名稱並高亮顯示、點選列表顯示物件的資訊框，如下圖：

顯示資訊框

下面，說說具體的實現思路與程式碼。

1、FeatureLayer屬性表的獲取

獲取FeatureLayer的屬性表，首先得建立FeatureLayer物件，如下：

            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([255,0,0]),
                    1
                ),
                new Color([0,255,0,0.25])
            );
            //簡單渲染
            var  sr = new SimpleRenderer(symbol);
            ftch.setRenderer(sr);
            map.addLayer(ftch,1);
 

有了FeatureLayer物件，可以通過ftch.graphics獲取所有的記錄，獲取到graphics就能獲取到單個的graphic，就能獲取每一個graphic的attributes，如下：

                     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、屬性表的分頁顯示

此時，就能組裝分頁顯示屬性的json物件了，如下：

                     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 + ')');
 

將屬性表分頁顯示，如博文http://blog.csdn.net/gisshixisheng/article/details/40048451所示。

3、每一個物件事件的繫結與實現

每一個顯示物件的都是一個div，給div分別新增onclick，onmouseover和onmouseout事件，三個事件傳遞的引數都一樣，是在graphics裡面的index值，接下來就是實現三個事件，詳細程式碼如下：

            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對應的是單擊事件，showObject對應的是滑鼠經過事件，restoreObj對應的是滑鼠移除事件，這樣基本並能就實現了。詳細程式碼如下：

map.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
    <link rel="stylesheet" href="page.css">
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
        #map_ctrl{
            z-index: 99;
            position: absolute;
            top: 20pt;
            right: 10pt;
            background: #fff;
        }
        .button{
            padding: 3px;
            background: #eee;
            text-align: center;
            font-size: 12px;
            font-family: "微軟雅黑";
        }
        .button:hover,.attr_ctrl:hover{
            background: #ccc;
            cursor: pointer;
        }
        #attr_ctrl{
            z-index: 99;
            width: 155px;
            position:absolute;
            right: 0px;
            bottom:5px;
            text-align: right;
        }
        .attr_ctrl{
            padding: 5px;
            font-size: 12px;
            font-family: "微軟雅黑";
            width: 100px;
            background: #eee;
            border: 1px solid #000;
            border-bottom: none;
        }
        #map_attr{
            z-index: 99;
            font-size: 12px;
            font-family: "微軟雅黑";
            width: 176px;
            height: 150px;
            background: #eee;
            position: absolute;
            bottom: 0px;
            right:0px;
            border: 1px solid #000;
            border-bottom: none;
        }
    </style>
    <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/geometry/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([255,0,0]),
                    1
                ),
                new Color([0,255,0,0.25])
            );
            //簡單渲染
            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){//全圖
                map.centerAndZoom(mapCenter,4);
            });
            on(dom.byId("zoom_in"), "click", function(event){//拉框放大
                map.setMapCursor("url(cursor/zoom-in.cur),auto");
                navToolbar.activate(esri.toolbars.Navigation.ZOOM_IN);
            });
            on(dom.byId("zoom_out"), "click", function(event){//拉框縮小
                map.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){//顯示或隱藏屬性表
                 if($(".attr_ctrl").html()=="顯示屬性"){
                     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 + ')');
                     loadPages(1);
                     $("#map_attr").show();
                     $(".attr_ctrl").html("隱藏屬性");
                     $("#attr_ctrl").css("bottom","155px");
                 }
                else{
                     $("#map_attr").hide();
                     $(".attr_ctrl").html("顯示屬性");
                     $("#attr_ctrl").css("bottom","5px");
                 }
            });
            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();
            };
        });
        function loadPages(page){
            $('#pages').html("");
            $('#pages').itemPage({
                data:PAGE_DATA,
                currpage:page,
                pagesize:pagesize
            });
        };
        function showPage(page){
            console.log(page);
            switch(page){
                case "prev":{//前一頁
                    if(currpage>1){
                        currpage=currpage-1;
                    }
                    else{
                        alert("沒有上一頁了！");
                    }
                    break;
                }
                case "next":{//後一頁
                    if(currpage!=getLastPage()){
                        currpage=currpage+1;
                    }
                    else{
                        alert("沒有下一頁了！");
                    }
                    break;
                }
                case "last":{//最後一頁
                    currpage=getLastPage();
                    break;
                }
                default:{
                    currpage=1;//第一頁
                    break;
                }
            }
            loadPages(currpage);
        };
        function getLastPage(){
            var total=PAGE_DATA.total;
            if(total%pagesize==0){
                return total/pagesize;
            }
            else{
                return parseInt(total/pagesize)+1;
            }
        }
    </script>
</head>

<body>
<div id="map">
    <div id="map_ctrl">
        <a id="full_extent" class="button">全  圖</a>
        <a id="zoom_in" class="button">拉框放大</a>
        <a id="zoom_out" class="button">拉框縮小</a>
    </div>
    <div  id="attr_ctrl">
        <a class="attr_ctrl">顯示屬性</a>
    </div>
    <div id="map_attr" style="display: none">
        <div id="pages">
        </div>
    </div>
</div>
</body>
</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,//資料
            currpage=options.currpage,//當前頁
            pagesize=options.pagesize;//每頁顯示的資料條目器

        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')\">首 頁</div>"),
            prev=$("<div id=\"prev\" class=\"page_ctrl\" onClick=\"showPage('prev')\">前一頁</div>"),
            next=$("<div id=\"next\" class=\"page_ctrl\" onClick=\"showPage('next')\">後一頁</div>"),
            last=$("<div id=\"last\" class=\"page_ctrl\" onClick=\"showPage('last')\">末 頁</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='showObj("+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);

到此功能基本上完成，很多有待優化，還望繼續關注LZUGIS之Arcgis for Javascript系列博文，您的支援就是我的動力，謝謝。

QQ：1004740957

mail：[email protected]