Arcgis for Javascript之统计图的实现

首先，截个图给大家看看效果：

初始化状态

放大后的状态

点击选中后的状态

如上图所示，一般的涉及到的地图的统计涉及到上述所展示的三个状态：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<data.total;i++){
                    var symbol = new PictureMarkerSymbol("bar.png",20,30);
                    symbol.setOffset(-10,18);
                    var pt=new Point(items[i].X,items[i].Y,map.spatialReference);
                    var graphic = new esri.Graphic(pt,symbol,items[i]);
                    chartLayer.add(graphic);
                }
            };

通过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<graphics.length;i++){
                        graphics[i].symbol = symbol;
                        chartLayer.redraw();
                    }
                });

这里，主要通过监听map的zoom-end事件，去重新绘制统计图。

第三，点击显示详细图。

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

            function showDetailChart(evt){
                var graphic = evt.graphic;
                graphic.symbol.url="bar_select.png";
                chartLayer.redraw();
                map.infoWindow.setTitle("<b>"+graphic.attributes.name+"</b>");
                var content="<div style='text-align: center;'><img src='bar_detail.png'/></div>";
                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();
            };

通过以上几步，就基本上实现了地图统计图部分的功能。完整代码如下：

<!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">
    <style>
        html, body, #map {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        body {
            background-color: #FFF;
            overflow: hidden;
            font-family: "Trebuchet MS";
        }
    </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>
        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<data.total;i++){
                    var symbol = new PictureMarkerSymbol("bar.png",20,30);
                    symbol.setOffset(-10,18);
                    var pt=new Point(items[i].X,items[i].Y,map.spatialReference);
                    var graphic = new esri.Graphic(pt,symbol,items[i]);
                    chartLayer.add(graphic);
                }

                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<graphics.length;i++){
                        graphics[i].symbol = symbol;
                        chartLayer.redraw();
                    }
                });
            };
            function showDetailChart(evt){
                var graphic = evt.graphic;
                graphic.symbol.url="bar_select.png";
                chartLayer.redraw();
                map.infoWindow.setTitle("<b>"+graphic.attributes.name+"</b>");
                var content="<div style='text-align: center;'><img src='bar_detail.png'/></div>";
                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>
</head>

<body>
<div id="map">
</div>
</body>
</html>

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

如有疑问，请联系QQ：1004740957或者e-mail：niujp08@qq.com，联系请说明来意，谢谢！

Arcgis for Javascript之统计图的实现的更多相关文章

Arcgis for Javascript实现图
首先,截个图给大家看结果: 初始化状态放大后的状态点击选中后的状态如上图所看到的,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1.初始化状态.2.缩放后的状态:3.点击选中显示详情状态. ...
Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式
原文:Arcgis for Javascript API下类似于百度搜索A.B.C.D marker的实现方式多说无益,首先贴两张图让大家看看具体的效果: 图1.百度地图搜索结果图2.Arcgis ...
ArcGIS For JavaScript API 默认参数
“esri.config”的是在1.3版中的的“esriConfig”的替代品.如果您使用的是1.2或更低的版本,您应该参阅默认API v1.2和更低的配置.对于版本1.3或更高版本,您可以使用“es ...
arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现
图层控制是非常多GIS系统里面必须的一个小功能,本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层控制的实现方式.首先看图: 实现效果 ...
Arcgis for javascript不同的状态下自己定义鼠标样式
俗话说:爱美之心.人皆有之. 是的.没错,即使我仅仅是一个做地图的,我也希望自己的地图看起来好看一点. 在本文,给大家讲讲在Arcgis for javascript下怎样自己定义鼠标样式. 首先.说 ...
Arcgis for javascript map操作addLayer具体解释
本节的内容非常easy.说说Arcgis for Javascript里面map对象的addLayer方法.在for JS的API中,addLayer方法有两种.例如以下图: watermark/2/ ...
Arcgis for Javascript之featureLayer图和属性互操作性
说明:主要实现加载FeatureLayer并显示属性表,而要实现联动属性表与地图,首先,看看实施后的效果: 显示效果如上图所看到的,本文章主要实现了下面几个功能:1.FeatureLayer属性表的 ...
利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup
1.引言由于Arcgis for javascript API不可以绘制Geojson,并且提供的Popup一般只可以弹出一个,在很多专题图制作中,会遇到不少的麻烦.因此本文结合了两个现有的Arcg ...
ArcGIS for JavaScript学习（一）
一 API准备从网上下载开发包:ArcGIS for JavaScript(百度网盘地址) sdk中含有API的帮助和例子 2.离线部署(以IIS为例) 配置IIS(详见网络):解压离线包,包中的 ...

随机推荐

python16_day12【html、css】
一.HTML 所有HTML标签操作 <!DOCTYPE html> <html lang="en"> <head>  ...
go——切片（二）
切片是一种数据结构,这种数据结构便于使用和管理数据集合. 切片是围绕动态数组的概念构建的,可以按需自动增长和缩小. 切片的动态增长是通过内置函数append来实现的.这个函数可以快速且高效地增长切片. ...
CodeForces - 451E Devu and Flowers (容斥+卢卡斯)
题意:有N个盒子,每个盒子里有fi 朵花,求从这N个盒子中取s朵花的方案数.两种方法不同当且仅当两种方案里至少有一个盒子取出的花的数目不同. 分析:对有k个盒子取出的数目超过了其中的花朵数,那么此时 ...
hadoop17---RPC和Socket的区别
RPC是在Socket的基础上实现的,它比socket需要更多的网络和系统资源.RPC(Remote Procedure Call,远程过程调用)是建立在Socket之上的,出于一种类比的愿望,在一台 ...
Android平台利用OpenCL框架实现并行开发初试
http://www.cnblogs.com/lifan3a/articles/4607659.html 在我们熟知的桌面平台,GPU得到了极为广泛的应用,小到各种电子游戏,大到高性能计算,多核心.高 ...
HDU4631(标程代码）
/*将x从小到大排序,每次插入一个点,直接找比这个点的x大的第一个,然后从这个开始向两边找 ,找点的下标用多重容器实现*/ #include<stdio.h> #include<st ...
Linux安装字体文件
登录生成验证码的时候使用了monaco.ttf字体,没有安装字体的情况下,会报错:can't open resource Linux安装字体的方式其实很简单,就是调用fc-cache -f -v命令, ...
js里面如何才能让成员方法去调用类中其他成员
function fun(){ var _this = this; //如果函数是用var定义的私有函数,如下 var func1 = function(){ } //那么类中其他函数都可以直接通过f ...
I方法怎么不能获取多选框的数据
前端代码 <input type="checkbox" name="m_name" value="{$vo.name}" class ...
Treflection04_面试题
1. package reflectionZ; import java.lang.reflect.Field; import java.lang.reflect.Method; public clas ...

Arcgis for Javascript之统计图的实现

Arcgis for Javascript之统计图的实现的更多相关文章

随机推荐

热门专题