【十】ArcGIS API for Javascript之Mix Echarts热力图

一、引言

Echarts对于WebGIS开发人员来说并不陌生，特别是随着版本的更新，与地图相结合的数据可视化方式使得专题图制作更加直观明了。近期项目需求，需要动态地根据业务数据生成热力图。解决方案即：ArcGIS API For Javascript3.X与Echarts3相结合，来进行热力图渲染。并借此机会整理了该篇博客供大家交流学习。下面是代码运行的最终效果图（全球港口分布密度图）：
在这里插入图片描述

二、使用的扩展文件

echartsExtent.js，Echarts扩展文件，用来绘制统计图。其引用的顺序要在ArcGIS的init.js之前，否则回报错。
Echarts3Layer.js ，echarts图层模块，用来创建显示统计图的图层，位于src文件夹下【这里需要配置自定义模块的路径】，最后可以采用AMD方式来引用。

<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
<script src="echartsExtent.js"></script>
<script>
  var dojoConfig={
      async: true,
      packages: [{
          name: "src",
          location: location.pathname.replace(/\/[^/]+$/, "")+"/src"
      }]
  }
</script>
<script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>

三、数据说明

这里我们需要的格式为一个包含点位置信息的二维数组，如：

[
	[-22.55418,63.99983],
	[-22.12969,64.01503],
	[-79.26764,43.20091],
	......
]

不管你使用的什么格式的数据，都需要通过转换得到上述形式的数据。

四、代码

1、加载地图

首先我们需要初始化一个地图，并配置相关属性：中心点位置、缩放级别、底图样式

map = new Map("map", {
     basemap: "gray",  
     center: [60,15], 
     zoom: 3,
	 logo:false
});

2、创建Echarts图层

overlay相当于一个 echarts 实例，并通过 setOption（） 方法可以生成热力图。
chartsContainer为echarts 对应的DOM容器，我们在移除热力图会调用该对象的remove()方法来实现热力图的关闭功能。

//初始化echarts图层
var overlay = new Echarts3Layer(map, echarts);
var chartsContainer = overlay.getEchartsContainer();
var myChart = overlay.initECharts(chartsContainer);

3、构造数据

示例中我们用到的港口数据格式如下，包括了name和value属性：

[
	{"name":"KEFLAVIK","value":[-22.55418,63.99983]},
	{"name":"STRAUMSVIK","value":[-22.12969,64.01503]},
	......
]

转换函数：通过一个遍历循环将每个港口的位置信息push到一个数组中：

var convertData = function(data) {
	var res = [];
	for(var i = 0; i < data.length; i++) {
		res.push(data[i].value);
	}
	return res;
};

4、配置option

title同来设置标题信息与样式；visualMap主要用来配置色带和图例显示；geo设置坐标系；series重点介绍一下，主要包括type、coordinateSystem、data、pointSize:、blurSize。

图类型type：属性值为heatmap，热力图；
坐标系coordinateSystem：默认为geo；
数据data：即上述转换后的二维数组；
渲染点大小pointSize：根据具体的数据以及地图缩放级别来进行设置；
模糊大小blurSize：根据具体的数据以及地图缩放级别来进行参数设置。

var option = {
	title: {
		text: '全球港口密度分布图2017',
		subtext: 'By佯佯DESIGNER',
		left: 'center',
		textStyle: {
			color: '#333'
		}
	},
	visualMap: {
		min: 0,
		max: 2,
		show: false,
		seriesIndex: 0,
		calculable: true,
		inRange: {
			color: ['blue', 'blue', 'green', 'yellow', 'red'] //热力图色带
		},
		textStyle: {
			color: '#fff'
		}
	},
	geo: {
		map: '',
		show: false,
		label: {
			emphasis: {
				show: false
			}
		},
		left: 0,
		top: 0,
		right: 0,
		bottom: 0,
		roam: false,
		itemStyle: {
			normal: {
				areaColor: '#323c48',
				borderColor: '#111'
			},
			emphasis: {
				areaColor: '#2a333d'
			}
		}
	},
	series: [{
		type: 'heatmap', 
		coordinateSystem: 'geo',
		data: convertData(ports), //转换后的港口数据
		pointSize: 3,  //点大小
		blurSize: 15  //模糊大小
	}]
};

5、显示热力图、移除热力图

// 使用上一步指定的配置项生成热力图。
overlay.setOption(option);
//移除热力图
chartsContainer.remove();

最后的最后是文中提到的扩展文件的下载链接：扩展文件