Arcgis for Javascript之统计图的实现

页面导航:首页 > 网络编程 > JavaScript > Arcgis for Javascript之统计图的实现

Arcgis for Javascript之统计图的实现

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

首先,截个图给大家看看效果:初始化状态放大后的状态点击选中后的状态如上图所示,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1、初始化状态;2、缩放后的状态;

首先,截个图给大家看看效果:

\

初始化状态

\

放大后的状态<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+PGltZyBzcmM9"http://www.2cto.com/uploadfile/Collfiles/20141020/20141020084653175.png" alt="\">

点击选中后的状态

如上图所示,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1、初始化状态;2、缩放后的状态;3、点击选中显示详情状态。第一种状态下,加载统计图,一般来说,在地图上显示的统计图只是一个趋势或者示意,详细的还得去点击显示;第二种状态,随着地图的缩放,地图统计图随着地图的大小变化;第三种状态,点击选中,在信息框显示详细的统计图的信息。


首先,跟大家谈谈地图统计图几种实现方式。目前情况下,在Arcgis for Javascript下面,实现统计图有三种方式。

1、示意图方式

示意图方式是最简单的一种方式,什么意思呢,就是用一个静态的png图片的方式,示意图的数据不代表真实的数据,示意在该状态时是地图统计图,详细的统计信息在点击示意图的时候才会出现。

2、后台生成图片方式

后台生成图片的方式也是有很多人采取的一种解决方案,在这种方式下,地图上的统计图的数据代表真实的数据信息,地图上的统计图是在后台用java或者c#生成的,并在地图上展示出来,并通过点击获取详细统计信息,这种处理方式就是将压力交给服务器,减小客户端压力,但是显示的效果不好。

3、前台直接展示方式

前台直接展示是将统计数据传给前台,前台生成统计图的方式。这种方式对客户端的压力比较大,而且从技术上来说,也是最难的。


了解了上述三种统计图的生成方式,接下来了解一下统计图在地图中的展示方式。不论是上述那种方式,统计图在地图中的显示都是通过graphic和graphiclayer来展示的,只是前两种展示的是栅格图,后一种方式展示的是矢量图,每一个统计图是一个graphic对象,统计图在graphiclayer中显示。


下文将详细的讲述上述三种状态下的实现思路与方式。

第一,加载统计图。

在此,数据是json格式的,统计图的显示是通过X与Y去定位的,JSON的数据如下:

        var CITY_DATA={
            "total":34,
            "items":[{"id":1,"name":"乌鲁木齐","X":87.575829,"Y":43.782212},
                {"id":2,"name":"拉萨","X":91.162998,"Y":29.71042},
                {"id":3,"name":"西宁","X":101.797303,"Y":36.593642},
                {"id":4,"name":"兰州","X":103.584297,"Y":36.119086},
                {"id":5,"name":"成都","X":104.035508,"Y":30.714179},
                {"id":6,"name":"重庆","X":106.519115,"Y":29.478925},
                {"id":7,"name":"贵阳","X":106.668071,"Y":26.457312},
                {"id":8,"name":"昆明","X":102.726775,"Y":24.969385},
                {"id":9,"name":"银川","X":106.167225,"Y":38.598524},
                {"id":10,"name":"西安","X":108.967128,"Y":34.276112},
                {"id":11,"name":"南宁","X":108.233931,"Y":22.748296},
                {"id":12,"name":"海口","X":110.346181,"Y":19.96992},
                {"id":13,"name":"广州","X":113.226683,"Y":23.18307},
                {"id":14,"name":"长沙","X":112.947928,"Y":28.169916},
                {"id":15,"name":"南昌","X":115.893715,"Y":28.652363},
                {"id":16,"name":"福州","X":119.246768,"Y":26.070765},
                {"id":17,"name":"台北","X":121.503567,"Y":25.008274},
                {"id":18,"name":"杭州","X":120.183046,"Y":30.330584},
                {"id":19,"name":"上海","X":121.449707,"Y":31.253361},
                {"id":20,"name":"武汉","X":114.216597,"Y":30.579253},
                {"id":21,"name":"合肥","X":117.262302,"Y":31.838353},
                {"id":22,"name":"南京","X":118.805692,"Y":32.085022},
                {"id":23,"name":"郑州","X":113.6511,"Y":34.746308},
                {"id":24,"name":"济南","X":117.048331,"Y":36.60841},
                {"id":25,"name":"石家","X":114.478215,"Y":38.033276},
                {"id":26,"name":"太原","X":112.483066,"Y":37.798404},
                {"id":27,"name":"呼和浩特","X":111.842806,"Y":40.895751},
                {"id":28,"name":"天津","X":117.351094,"Y":38.925719},
                {"id":29,"name":"沈阳","X":123.296299,"Y":41.801604},
                {"id":30,"name":"长春","X":125.26142,"Y":43.981984},
                {"id":31,"name":"哈尔","X":126.567138,"Y":45.69381},
                {"id":32,"name":"北京","X":116.068276,"Y":39.892225},
                {"id":33,"name":"香港","X":114.093117,"Y":22.427852},
                {"id":34,"name":"澳门","X":113.552482,"Y":22.184495}
            ]
        };
紧接着,就是显示统计图,代码如下:

            var chartLayer = new GraphicsLayer({"id":"chartLayer"});
            map.addLayer(chartLayer,1);
            chartLayer.on("click",showDetailChart);
            addReadPopup(CITY_DATA);

            function addReadPopup(data){
                var items= data.items;
                for(var i=0;i通过X与Y,将每一个统计图通过graphic的方式添加到graphiclayer里。


第二,缩放时统计图大小的变化。

地图缩放时,统计图的大小也得随着地图的缩放发生相对应的变化,如下:

                map.on("zoom-end",function(zoom){
                    var level=zoom.level;
                    var symbol = new PictureMarkerSymbol("bar.png",20*(level-3),30*(level-3));
                    symbol.setOffset(-10*(level-3),18*(level-3));
                    var graphics = chartLayer.graphics;
                    for(var i=0;i
这里,主要通过监听map的zoom-end事件,去重新绘制统计图。


第三,点击显示详细图。

点击是监听的graphiclayer的click事件,点击图通过infowindow的方式显示详细统计图信息,这里面就好做多了,如下:

            function showDetailChart(evt){
                var graphic = evt.graphic;
                graphic.symbol.url="bar_select.png";
                chartLayer.redraw();
                map.infoWindow.setTitle(""+graphic.attributes.name+"");
                var content="
"; map.infoWindow.setContent(content); map.infoWindow.show(graphic.geometry); $(".maximize").hide(); $(".close").click(function(){ restoreChart(evt); }); }; function restoreChart(evt){ var graphic = evt.graphic; graphic.symbol.url="bar.png"; chartLayer.redraw(); };
通过以上几步,就基本上实现了地图统计图部分的功能。完整代码如下:




    
    
    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>
        var CITY_DATA={
            "total":34,
            "items":[{"id":1,"name":"乌鲁木齐","X":87.575829,"Y":43.782212},
                {"id":2,"name":"拉萨","X":91.162998,"Y":29.71042},
                {"id":3,"name":"西宁","X":101.797303,"Y":36.593642},
                {"id":4,"name":"兰州","X":103.584297,"Y":36.119086},
                {"id":5,"name":"成都","X":104.035508,"Y":30.714179},
                {"id":6,"name":"重庆","X":106.519115,"Y":29.478925},
                {"id":7,"name":"贵阳","X":106.668071,"Y":26.457312},
                {"id":8,"name":"昆明","X":102.726775,"Y":24.969385},
                {"id":9,"name":"银川","X":106.167225,"Y":38.598524},
                {"id":10,"name":"西安","X":108.967128,"Y":34.276112},
                {"id":11,"name":"南宁","X":108.233931,"Y":22.748296},
                {"id":12,"name":"海口","X":110.346181,"Y":19.96992},
                {"id":13,"name":"广州","X":113.226683,"Y":23.18307},
                {"id":14,"name":"长沙","X":112.947928,"Y":28.169916},
                {"id":15,"name":"南昌","X":115.893715,"Y":28.652363},
                {"id":16,"name":"福州","X":119.246768,"Y":26.070765},
                {"id":17,"name":"台北","X":121.503567,"Y":25.008274},
                {"id":18,"name":"杭州","X":120.183046,"Y":30.330584},
                {"id":19,"name":"上海","X":121.449707,"Y":31.253361},
                {"id":20,"name":"武汉","X":114.216597,"Y":30.579253},
                {"id":21,"name":"合肥","X":117.262302,"Y":31.838353},
                {"id":22,"name":"南京","X":118.805692,"Y":32.085022},
                {"id":23,"name":"郑州","X":113.6511,"Y":34.746308},
                {"id":24,"name":"济南","X":117.048331,"Y":36.60841},
                {"id":25,"name":"石家","X":114.478215,"Y":38.033276},
                {"id":26,"name":"太原","X":112.483066,"Y":37.798404},
                {"id":27,"name":"呼和浩特","X":111.842806,"Y":40.895751},
                {"id":28,"name":"天津","X":117.351094,"Y":38.925719},
                {"id":29,"name":"沈阳","X":123.296299,"Y":41.801604},
                {"id":30,"name":"长春","X":125.26142,"Y":43.981984},
                {"id":31,"name":"哈尔","X":126.567138,"Y":45.69381},
                {"id":32,"name":"北京","X":116.068276,"Y":39.892225},
                {"id":33,"name":"香港","X":114.093117,"Y":22.427852},
                {"id":34,"name":"澳门","X":113.552482,"Y":22.184495}
            ]
        };
        var map, mapCenter;
        require([
            "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/layers/FeatureLayer",
            "esri/layers/GraphicsLayer",
            "esri/geometry/Point",
            "esri/symbols/PictureMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "esri/renderers/SimpleRenderer",
            "dojo/_base/Color",
            "dojo/domReady!"],
        function(Map,
             Tiled,
             FeatureLayer,
             GraphicsLayer,
             Point,
             PictureMarkerSymbol,
             SimpleLineSymbol,
             SimpleRenderer,
             Color)
        {
            map = new Map("map", {logo:false,slider: true});
            var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");
            map.addLayer(tiled,0);
            mapCenter = new Point(103.847, 36.0473, map.spatialReference);
            map.centerAndZoom(mapCenter,4);
            var chartLayer = new GraphicsLayer({"id":"chartLayer"});
            map.addLayer(chartLayer,1);
            chartLayer.on("click",showDetailChart);
            addReadPopup(CITY_DATA);

            function addReadPopup(data){
                var items= data.items;
                for(var i=0;i"+graphic.attributes.name+"");
                var content="
"; map.infoWindow.setContent(content); map.infoWindow.show(graphic.geometry); $(".maximize").hide(); $(".close").click(function(){ restoreChart(evt); }); }; function restoreChart(evt){ var graphic = evt.graphic; graphic.symbol.url="bar.png"; chartLayer.redraw(); }; }); </script>

最后,第三种方式的实现目前本人正在努力实现,实现后会第一时间与大家分享,如有不对,还望指正!


如有疑问,请联系QQ:1004740957或者e-mail:,联系请说明来意,谢谢!




Tags:

文章评论

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

<