JVectorMap 分级统计图

raid GIS, 前端开发

Choropleth map 即分级统计图。在整个制图区域的若干个小的区划单元内（行政区划或者其他区划单位），根据各分区资料的数量（相对）指标进行分级，并用相应色级或不同疏密的晕线，反映各区现象的集中程度或发展水平的分布差别。
分级统计图法可反映布满整个区域的现象（如地貌切割密度）、呈点状分布的现象（如居民点的密度）或线状分布的现象（如河流密度或道路网密度），但较多的是反映呈面状但属分散分布的现象，如反映人口密度、某农作物播种面积的比、人均收入等。此法因常用色级表示，故亦称色级统计图法。

在创建了世界地图后，我们可以使用其他参数改变地图的外观，具体参数描述请参看 JVectorMap API 。

接下来我们将创建一个 choropleth map ，这个例子中我们将会对2010年各个国家的 GDP 信息进行展示。首先我们需要一些数据，可以从 IMF 网站上去下载得到格式为 XLS 的数据文件，然后将之转化为下面的格式，将文件存储为名字为 gdp-data.js 的文件。

var gdpData = {
  "AF": 16.63,
  "AL": 11.58,
  "DZ": 158.97,
  ...
};

将此文件引入后，修改初始化代码如下：

$('#world-map-gdp').vectorMap({
  map: 'world_mill_en',
  series: {
    regions: [{
      values: gdpData,
      scale: ['#C8EEFF', '#0071A4'],
      normalizeFunction: 'polynomial'
    }]
  },
  onRegionLabelShow: function(e, el, code){
    el.html(el.html()+' (GDP - '+gdpData+')');
  }
});

附完整的代码

<!DOCTYPE html>
<html>
<head>
  <title>jVectorMap demo</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <link rel="stylesheet" media="screen" href="js/jquery-jvectormap-1.2.2.css" type="text/css"/>
  <script src="js/jquery-1.8.2.js"></script>
  <script src="js/jquery-jvectormap-1.2.2.min.js"></script>
  <script src="js/jquery-jvectormap-world-mill-en.js"></script>
  <script src="js/gdp-data.js"></script>
</head>
<body style="margin:auto">
  <div id="world-map" style="width: 100%; height: 400px"></div>
  <script>
    $(function(){
    	$('#world-map').vectorMap({
    		  map: 'world_mill_en',
    		  series: {
    		    regions: [{
    		      values: gdpData,
    		      scale: ['#C8EEFF', '#0071A4'],
    		      normalizeFunction: 'polynomial'
    		    }]
    		  },
    		  onRegionLabelShow: function(e, el, code){
    		    el.html(el.html()+' (GDP - '+gdpData+')');
    		  }
    		});
    });
  </script>
</body>
</html>

运行结果

发表评论