【十】ArcGIS API for Javascript之专题图的制作（六）

最新推荐文章于 2024-07-07 10:08:32 发布

佯佯Young

最新推荐文章于 2024-07-07 10:08:32 发布

阅读量5.7k

点赞数 7

本文链接：https://blog.csdn.net/yy284872497/article/details/78762157

版权

本文介绍了如何使用ArcGIS API for Javascript制作统计图表专题图，如直方图、饼图、柱状图和堆叠图。通过引入DojoX Charting库，结合CustomModules类包中的ChartInfoWindow.js和GeometryUtils.js，实现信息窗口中的统计图表，并展示了华东地区年均收入的直方图实例。

摘要由CSDN通过智能技术生成

九、统计图表专题图

1、引言

统计图表是专题地图中常用的一类符号，用于表示制图要素属性。常用的统计图表类型有直方图、饼图、柱状图、堆叠图等。与之前提到的渲染器不同，在ArcGIS API for Javascript没有直接提供统计图表对应的渲染器，需要我们基于API进行扩展。

扩展思路：借鉴了刘光老师《WebGIS从基础到开发实践》一书提供思路以及编写的CustomModules类包，即： ArcGIS API for Javascript是基于Dojo框架编写，故我们可以使用DojoX Charting的Chart2D、Chart3D图表创建统计图。然后在每个要素中心自定义一个信息窗口，最后在信息窗口添加对应的统计图。

2、CustomModules类包说明

CustomModules类包包括：ChartInfoWindow.js (图表响应地图的放大、缩小、平移等操作)、CustomThme.js（基本的图表样式）、GeometryUtils.js（计算多边形中心的算法，确定信息窗口位置，避免与服务器交互，提高响应速度）。这里我们引用ChartInfoWindow.js和GeometryUtils.js两个类包。

如下图所示，为华东地区各个省份年均收入的直方图专题图，选取了1995、2000、2005年三年的年均收入信息做对比。
这里写图片描述

3、代码部分

话不多说，直接上完整代码（直方图专题图）：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>直方图专题图</title>  
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/claro/claro.css" />
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <link href="ChartInfoWindow.css" rel="stylesheet" />  
    <style>  
        html,body,#map{  
             padding: 0;  
             margin: 0;  
             height: 100%;  
             width: 100%;  
             border:0px solid #000;  
        }  
    </style> 
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>  
    <script>  
        require([  
            "esri/map",  
            "esri/layers/FeatureLayer",   
            "esri/layers/ArcGISDynamicMapServiceLayer",   
            "esri/symbols/SimpleLineSymbol",   
            "esri/symbols/SimpleFillSymbol",  
            "esri/renderers/SimpleRenderer", 
            "esri/Color", 
            "dojo/_base/array",   
            "dojo/dom-construct",   
            "dojo/_base/window",