Arcgis for Javascript之featureLayer图和属性的互操作

页面导航:首页 > 网络编程 > JavaScript > Arcgis for Javascript之featureLayer图和属性的互操作

Arcgis for Javascript之featureLayer图和属性的互操作

来源: 作者: 时间:2016-02-20 09:49 【

说明:主要实现加载FeatureLayer与显示属性表,并实现属性表与地图的联动,首先,看看实现后的效果:显示效果如上图所示,本文章主要实现了以下几个功能:1、FeatureLayer属性表的分页

说明:主要实现加载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

2、属性表的分页显示

此时,就能组装分页显示属性的json对象了,如下:

                     var graphics=ftch.graphics;
                     console.log(graphics);
                     var item = "";
                     for(var i=0;i将属性表分页显示,如博文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




    
    
    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/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;i1){
                        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>



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=$("
"), pagectrl=$("
"); var first=$("
首 页
"), prev=$("
前一页
"), next=$("
后一页
"), last=$("
末 页
"); var start=getStartindex(), end=getEndindex(); for(var i=start;i"+data.items[i].text+"
"); 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 script系列博文,您的支持就是我的动力,谢谢。

QQ:1004740957

mail:




Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<