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”添加到 引用之中
最低0.47元/天 解锁文章
扫一扫
413
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
