寫在前面:
這篇博客是上一篇博客的拓展（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 {
width: 100%;
height: 100%;
}
#province {
width: 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