全国疫情统计地图可视化(2)—

全国疫情统计地图可视化(2)——实现数据下钻

写在前面:

这篇博客是上一篇博客的拓展（https://www.cnblogs.com/wushenjiang/p/12416561.html），同样借鉴了张凯鑫同学和王正帅同学的博客，在此感谢二位老哥。博客地址附上：https://www.cnblogs.com/wuren-best/p/12404757.html 和 https://www.cnblogs.com/20183544-wangzhengshuai/p/12409216.html

新的需求：

在原有的基础上，需要实现一个数据下钻（所谓的数据下钻即可以显示二级地图，如点击省可以看到省下市的信息）

实现思路：

1.首先，我们既然要显示二级地图，肯定需要二级地图的json或js(附在文末)。
2.有了二级地图，我们为全国地图绑定一个点击事件，使其跳转servlet(也可直接在本页面内进行地图内容的覆盖，但为了尽快实现功能没有那么做)。
3.再通过servlet跳转到二级地图界面，获取传递的参数并读取对应的二级地图json，并为其设置好样式。
4.通过ajax从数据库读取各个地区的数据并显示到地图上。

效果截图：

部分代码：

跳转的servlet代码:

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=utf-8");
		String province = request.getParameter("province");
		request.setAttribute("province", province);
		request.getRequestDispatcher("/provincemap.jsp").forward(request, response);
		
	}

二级地图显示界面代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省份地图显示</title>
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/china.js"></script>
<style>
* {
	margin: 0;
	padding: 0
}

html, body {
	 100%;
	height: 100%;
}

#province {
	 800px;
	height: 600px;
	margin: 150px auto;
	border: 1px solid #ddd;
}
</style>
</head>
<body>
	<div id="province"></div>
	<script>
		var mydata1 = new Array();
		var chart = echarts.init(document.getElementById('province'));
		var province = "${province}";
		$.post("${pageContext.request.contextPath}/province/" + province
				+ ".json", function(geoJson) {
			echarts.registerMap(province, geoJson);
			chart.setOption(option = {
				title : {
					text : province + '地区疫情情况',
					x : 'center'
				},
				tooltip : {
					trigger : 'item',
					formatter : '{b}<br/>{c} (确诊 / 人)'
				},
				toolbox : {
					show : true,
					orient : 'vertical',
					left : 'right',
					top : 'center',
					feature : {
						dataView : {
							readOnly : false
						},
						restore : {},
						saveAsImage : {}
					}
				},
				visualMap : {
					min : 0,
					max : 500,
					inRange : {
						color : [ '#ffaa85', '#FF7F50','#bc1a19' ]
					//取值范围的颜色
					},
					pieces:[
						{gt:1000},
						{gt:500,lte:999},
						{gte:1,lte:499},
						{value:0,label:'0',color:'#ffffff'},
					],
					show : true
				//图注
				},
				series : [ {
					type : 'map',
					mapType : province, // 自定义扩展图表类型
					label : {
						show : true
					}
				} ]
			});
		});
		var postURL = "/Course3/getprovince"
		$.ajaxSettings.async = false;
		$.post(postURL, {}, function(rs) {
			var dataList = JSON.parse(rs);
			for(var i=0;i<dataList.length;i++)
			{
				var d={};
				d['name'] = dataList[i].city+'市';
				d['value']  = dataList[i].confirmed_num;
				mydata1.push(d);
			}
			alert(mydata1);
			chart.setOption({
				series :[{
					data:mydata1
				}]
			});
		});
		//设置成异步
		$.ajaxSettings.async = true;
	</script>
</body>
</html>

ajax获取数据的servlet代码：

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("UTF-8");
		response.setContentType("text/html;charset=UTF-8");
		String province = request.getParameter("province");
		DataService service = new DataService();
		List<Data> provinceList = null;
		try {
			 provinceList = service.getprovince(province);
		} catch (SQLException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		Gson gson = new Gson();
		String json = gson.toJson(provinceList);
		response.getWriter().write(json);
		
	}

需要的二级地图json和js:

链接：https://pan.baidu.com/s/1jsbHKKHR1jcU2B968iAVtQ 提取码：ezij