统计图的实现.docxVIP

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:2