2017/8/31 追加声明: 该文中所说的方法已经过时,目前仅供提供开发思路和参考,原因如下:
1.本文中使用ArcGIS API for JavaScript 版本为3.14,而且加载的类包CustomModules版本也相对较老,对于更高版本的JS,可能存在某些方法不兼容的情况;
2.对浏览器的兼容性有要求,我去年写的时候只是领导想看一下效果,所以并没有考虑浏览器兼容问题, 当时是基于firefox浏览器,不支持chrome浏览器,更不支持IE8。
相关的资料已经上传至百度云,链接:http://pan.baidu.com/s/1nuLLmXz 密码:lct8,仅作为代码参考!
声明:本方法并不是本人原创,原创应该为《Web GIS从基础到开发实践(基于ArcGIS API for JavaScript)》一书的作者刘光,曾敬文,曾庆丰三位老师。本人只是在学习过程中根据自己的需求,对三位老师的程序进行了修改,记录了自己在学习的过程以及收获。在此特别感谢三位老师的启发。
ArcGIS api for JavaScript并没有直接给出我们客户端统计专题图的接口,这就给一些像我一样的新手很大的困难。在《Web GIS从基础到开发实践(基于ArcGIS API for JavaScript)》一书中,作者提出了这样一种方法:ArcGIS是基于Dojo框架编写的,那么利用Dojo 为我们提供的 DojoX.charting(http://dojotoolkit.org/reference-guide/1.9/dojox/charting.html#dojox-charting)来编写实现我们需要的图表。然后将我们图表放置在一个绑定了位置结点的自定义信息框中。然后编写信息框随地图放缩移动的事件,便可以得到我们想要的统计专题图效果。
首先我先来说一下原版程序中老师们自己写的类包CustomModules,它包含了三个JS文件,分别是:ChartInfoWindow.js (图表响应地图的放大、缩小、平移等操作)、CustomThme.js(基本的图表样式)、GeometryUtils.js(计算多边形中心的算法,确定信息框位置,比服务器算法更加高效)。再结合我自己想要达到的效果,我只加载了ChartInfoWindow.js 文件。
下面是我的源代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>直方图专题图</title>
<link rel="stylesheet" href="http://192.168.15.86:8080/arcgis_js_api/library/3.14/3.14/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="http://192.168.15.86:8080/arcgis_js_api/library/3.14/3.14/esri/css/esri.css">
<link href="ChartInfoWindow.css" rel="stylesheet" />
<style>
html,body{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
border:0px solid #000;
}
#map{
position: relative;
width:100%;
height:100%;
border:1px solid #000;
}
#info {
height: 10%;
width: 80%;
border:1px solid #000;
}
</style>
<script>
//将 “Chapter07\Sample7-2\js\CustomModules”目录下的ChartInfoWindow.js CustomTheme.js geometryUtils.js 三个文件打包为“CustomModules”添加到 引用之中