目录
前言
Java开发的疫情地图 参考：开课吧
提示：以下是本篇文章正文内容，下面案例可供参考
第一章、课前准备
第1节.环境
配置Eclipse编译器：下载连接
第2节.初探编程语言Java
任务名称: 自动关机程序
任务描述:
1、提示用户，欢迎使用某某 关机程序
2、提示用户，输入倒计时关机的秒数
3、根据用户输入的秒数，进行自动关机
4、开始自动关机时，提示用户xxx秒后关机
基础知识：
标识符：
对包、类、方法、参数和变量等要素命名时，使用的字符序列成为标识符，规则：
1.不能以数字开头。
2.以数字、字母、下划线_和美元符号$组成。
3.长度无限制
4.不能是Java中的关键字。
定时关机
代码：
public class Demo1{
public static void main(String[] args) throws IOException{
//定时1000秒关机
Runtime.getRuntime().exec("shutdown -s -t 1000");
//取消关机
Runtime.getRuntime().exec("shutdown -a");
}
}
导出jar文件流程
导出后可在桌面看到jar文件带jar图标
变量：
创建变量的格式：
数据类型 变量名 = 初始值；
更改变量的内容：
变量 = 新的值；
如何使用变量：
在的程序代码中，变量的名称就表示变量中存储的内容.所以直接使用名称即可.
数据类型:
8种基本数据类型：
数值类型6种：byte、short、int、long、float、double
字符类型：char
布尔类型：boolean (取值：true 或 false)
创建变量的示例：
int x = 20;
x=30;//为x赋新值
引用数据类型（工具相关的数据类型）：
字符串：String
创建变量的示例：
String text = “李白字太白”;
text =“望庐山瀑布”;
进行文字的显示（打印输出去）:
方式1：通过普通文字显示
System.out.println(“内容”);//换行输出
System.out.print(“内容”);
方式2：通过红色文字显示（通常用于提示错误）:
System.err.println(变量或数据);
运算符：
算术运算符： +-*/%
赋值运算符： = : 将等号右边的运算结果赋值给等号左边.
比较运算符： (特殊:运算的结果都是boolean类型的,非true即false)
== :比较符号两边是否相等,相等时结果为true
!= :比较符号两边是否步相等,不相等时结果为false
> :比较符号左边是否大于符号右边,大于时结果为true
< :比较符号左边是否小于符号右边,小于时结果为true
>= : ...
<= : ...
字符串连接符： + 当+号的任意一边为字符串时, +号的含义就不再是算数运算符,而是字符串连接符.
例如:
String text = "He"+"llo"+12;//结果是Hello12
常见面试题:
String text = 1+1+1+"1"+"1"+1+1;//"31111"
用于接收用户的输入:
//1.创建一个示例划接收对象input
Scanner input = new Scanner(System.in);
//2.提示用户输入
System.out.println(“请输入要关机的秒数：”)
//3.接收用户输入
Stirng text= input.nextLine();
System.out.println(“你输入的是：”+text);
任务代码：
public class Demo1 {
public static void main(String[] args) throws IOException {
// 用于接收用户输入
Scanner input = new Scanner(System.in);
System.out.println("请输入关机定时的秒数:");
int time = input.nextInt();
Runtime.getRuntime().exec("shutdown -s -t "+time);//执行关机
System.out.println("关机程序已启动，将再"+time+"秒后关机");
//Runtime.getRuntime().exec("shutdown -a");//取消关机
}
}
到这里完成了课前准备。
第二章、获取疫情数据
任务：了解网页协议，获取疫情人数
1、网址组成分析
网址的组成： 协议://域名:端口号/虚拟路径?参数列表#锚点
协议： 用于计算机与计算机之间交流的协议，用于传输速率，传输编码，出错的控制等等
http：超文本传输协议，默认端口号：80
https：安全超文本传输协议，默认端口号：443
域名：ip地址的别名。ip地址是计算机在互联网中的唯一表示如192.168.1.1
端口号：范围：0-65535.
虚拟路径：通过路径的方式，来管理服务器中的文件资源。
参数列表：向服务器发送的数据，每一个参数都是一个键值对，键和值之间通过=号连接，多个键值对之间通过&分割
2.通过获取网页代码疫情数据资源
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.URL;
import java.net.URLConnection;
public class Demo2 {
public static void main(String[] args) throws IOException {
//先准备一个URL类的对象
URL url = new URL("http://www.4399.com");
//2.打开服务器连接，得到连接对象 conn
URLConnection conn = url.openConnection();
//3.获取加载数据的字节输入流
InputStream is = conn.getInputStream();
//4.将 is装饰为能一次读取一行的字符输入流 br
BufferedReader br = new BufferedReader(new InputStreamReader(is));
//5.加载一行数据
String text = br.readLine();
//6.显示
System.out.println(text);
//7.释放资源
br.close();
}
}
到此我们可以通过上面代码对网页进行数据摘取，获得疫情数据
第三章、完成地图可视化
在HTML中疫情人数是写固定的，我们要做的就是通过后端来获取数据来显示实时数据，用获取到的数据插入做好的地图前端代码所需实时数据中可使数据完成实时同步可视化。
两种方法总结：
1、Java Server Pages
在服务器中下载TomCat应用配置好ip地址端口，把index.jsp和conterol.js文件上传到webapps/ROOT文件中，即可通过服务器ip访问jsp文件。
index.jsp代码:
其中数据获取部分代码即第二章所学部分。
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.net.URL,java.net.URLConnection,java.io.InputStream,java.io.BufferedReader,java.io.InputStreamReader" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8">
<title>疫情地图</title>
<script type="text/javascript">
<%
//1. 创建一个url对象。u1
URL u1 = new URL("https://zaixianke.com/yq/all");
//2、（建立连接），通过网址u1,打开网络连接，并得到连接对象conn
URLConnection conn = u1.openConnection();
//3、(获取数据传输的流),通过连接对象conn，获取输入流is
InputStream is = conn.getInputStream();
//4、将输入流is，装饰为一次能读取一行的 缓冲字符输入流
BufferedReader br = new BufferedReader(new InputStreamReader(is,"UTF-8"));
//5、读取内容
String text1 = br.readLine();
System.out.println(text1);
//6、关闭流
br.close();
%>
var data = <%=text1 %>
</script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.7.0/echarts.min.js"></script>
<script src="http://cdn.zaixianke.com/china.js"></script>
<script src="http://cdn.zaixianke.com/world.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:600px;"></div> <br>
<div style="text-align:center">
<a style="color:#333" class="control" align="center" href="javascript:updateMap(0)">国内累计</a>
<a style="color:#333" class="control" align="center" href="javascript:updateMap(1)">国内新增</a>
<a style="color:#333" class="control" align="center" href="javascript:updateMap(2)">全球累计</a>
<a style="color:#333" class="control" align="center" href="javascript:updateMap(3)">全球新增</a>
</div>
<script src="control.js"></script>
</body>
</html>
conterol.js代码:
var myChart = echarts.init(document.getElementById('main'));
function updateMap(num){
$(".control").show();
$(".control:eq("+num+")").hide();
myChart.clear();
var opt = null;
switch(num){
case 0:{
opt = {
// 设置标题和副标题及副标题跳转链接
title: {
text: '新冠疫情-国内累计数据',
subtext: '数据来源--开课吧',
sublink: 'https://www.kaikeba.com'
},
// 数据提示框
tooltip: {
trigger: 'item', // item放到数据区域触发
formatter: function (params, ticket, callback) {
if(params.data)
return params.name+'<br/>'+params.data.value+' (人)';
else
return params.name+'<br/>无疫情信息';
}
},
// 视觉映射方案:
// visualMap默认是连续映射，我们也可以设置为分段型，对于分布范围广的数据
// 使用透明度来区分疫情严重情况
visualMap: {
type: 'piecewise',
pieces: [
{gt: 2000, color: 'darkred'}, // (1500, Infinity]
{gt: 1300, lte: 2000, color: 'red', colorAlpha: 1}, // (1000, 1500]
{gt: 800, lte: 1300, color: 'red', colorAlpha: 0.8},
{gt: 500, lte: 800, color: 'red', colorAlpha: 0.6},
{gt: 200, lte: 500, color: 'red', colorAlpha: 0.4},
{gt: 50, lte: 200, color: 'red', colorAlpha: 0.3},
{lt: 50, color: 'red', colorAlpha: 0.2} // (-Infinity, 100)
],
},
// 具体数据
series: [
{
name: '国内各省确诊病例', // 系列名称
zoom:1.2,//地图大小
type: 'map', // 系列类型，地图
map: 'china', // 要使用的地图，即上面注册的地图名称
roam: true, // 开启鼠标缩放和平移漫游
label: { // 图形上的文本标签，地图默认显示数据名
show: true,
formatter: '{b}', // b是数据名，c是数据值
fontSize: 8
},
data: data.data,
}
]
};
}
break;
case 1:{
opt = {
// 设置标题和副标题及副标题跳转链接
title: {
text: '新冠疫情-国内新增数据',
subtext: '数据来源--开课吧',
sublink: 'https://www.kaikeba.com'
},
// 数据提示框
tooltip: {
trigger: 'item', // item放到数据区域触发
formatter: function (params, ticket, callback) {
if(params.data)
return params.name+'<br/>'+params.data.value+' (人)';
else
return params.name+'<br/>无疫情信息';
}
},
// 视觉映射方案:
// visualMap默认是连续映射，我们也可以设置为分段型，对于分布范围广的数据
// 使用透明度来区分疫情严重情况
visualMap: {
type: 'piecewise',
pieces: [
{gt: 50, color: 'darkred'}, // (1500, Infinity]
{gt: 30, lte: 50, color: 'red', colorAlpha: 1}, // (1000, 1500]
{gt: 20, lte: 30, color: 'red', colorAlpha: 0.8},
{gt: 10, lte: 20, color: 'red', colorAlpha: 0.6},
{gt: 5, lte: 10, color: 'red', colorAlpha: 0.4},
{gt: 1, lte: 5, color: 'red', colorAlpha: 0.3},
{lt: 1, color: 'red', colorAlpha: 0.0} // (-Infinity, 100)
],
},
// 具体数据
series: [
{
name: '国内各省确诊病例', // 系列名称
zoom:1.2,//地图大小
type: 'map', // 系列类型，地图
map: 'china', // 要使用的地图，即上面注册的地图名称
roam: true, // 开启鼠标缩放和平移漫游
label: { // 图形上的文本标签，地图默认显示数据名
show: true,
formatter: '{b}', // b是数据名，c是数据值
fontSize: 8
},
data: data.today,
}
]
};
}
break;
case 2:{
opt = {
// 设置标题和副标题及副标题跳转链接
title: {
text: '新冠疫情-全球累计数据',
subtext: '数据来源--开课吧',
sublink: 'https://www.kaikeba.com'
},
// 数据提示框
tooltip: {
trigger: 'item', // item放到数据区域触发
//formatter: '{b}<br/>{c} (人)' // 提示数据格式br表示换行，地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
formatter:function (params, ticket, callback) {
if(params.data)
return params.name+'<br/>'+params.data.value+' (人)';
else
return params.name+'<br/> 未公布感染人数';
}
},
// 视觉映射方案1：,疫情颜色根据传染病疫情等级分类为5个级别：黄色-橙色-深橙色-红色-深红色
// 为了是视觉分布更好，可以添加更多的颜色范围，然后适当调小max的值，因为美国和其它国家相差太大
/**/
visualMap: {
min: 1, // 颜色映射对应的最小值，即对应下面的lightskyblue
max: 500000, // 颜色映射对应的最大值，即对应下面的orangered
text: ['严重', '轻微'], // 映射图上下标记文本
realtime: true, // 是否显示拖拽手柄，映射条可以拖拽调整要映射的范围
calculable: true, // 拖拽时，是否实时更新地图
inRange: {
color: ['rgba(222,0,0,0.2)','rgba(160,0,0,1)'] // 颜色映射范围，最小值，过渡值，最大值
}
},
// 具体数据
series: [
{
name: '全球各国确诊病例', // 系列名称
zoom:1.2,//地图大小
type: 'map', // 系列类型，地图
map: 'world', // 要使用的地图，即上面注册的地图名称
roam: true, // 开启鼠标缩放和平移漫游
label: { // 图形上的文本标签，地图默认显示数据名
show: true,
fontSize:8,
//formatter: '{b}', // b是数据名，c是数据值
formatter:function (params, ticket, callback) {
//公布了数据 且 数据累计数据大于5万的显示国家名称
if(params.data && params.data.value>50000) {
return params.name;
}else{
return '';
}
}
},
data: data.g_data,
}
]
};
}
break;
case 3:{
opt = {
// 设置标题和副标题及副标题跳转链接
title: {
text: '新冠疫情-全球新增数据',
subtext: '数据来源--开课吧',
sublink: 'https://www.kaikeba.com'
},
// 数据提示框
tooltip: {
trigger: 'item', // item放到数据区域触发
formatter:function (params, ticket, callback) {
if(params.data)
return params.name+'<br/>'+params.data.value+' (人)';
else
return params.name+'<br/> 未公布感染人数';
}
},
// 视觉映射方案1：,疫情颜色根据传染病疫情等级分类为5个级别：黄色-橙色-深橙色-红色-深红色
// 为了是视觉分布更好，可以添加更多的颜色范围，然后适当调小max的值，因为美国和其它国家相差太大
/**/
visualMap: {
min: 0, // 颜色映射对应的最小值，
max: 20000, // 颜色映射对应的最大值
text: ['严重', '轻微'], // 映射图上下标记文本
realtime: true, // 是否显示拖拽手柄，映射条可以拖拽调整要映射的范围
calculable: true, // 拖拽时，是否实时更新地图
inRange: {
color: ['rgba(160,0,0,0)','rgba(160,0,0,1)'] // 颜色映射范围，最小值，过渡值，最大值
}
},
// 具体数据
series: [
{
name: '全球各国新增病例', // 系列名称
zoom:1.2,//地图大小
type: 'map', // 系列类型，地图
map: 'world', // 要使用的地图，即上面注册的地图名称
roam: true, // 开启鼠标缩放和平移漫游
label: { // 图形上的文本标签，地图默认显示数据名
show: true,
fontSize:8,
//formatter: '{b}', // b是数据名，c是数据值
formatter:function (params, ticket, callback) {
//公布了数据 且 数据累计数据大于5万的显示国家名称
if(params.data && params.data.value>1000 || params.name == '中国') {
return params.name;
}else{
return '';
}
}
},
data: data.g_today,
}
]
};
}
break;
}
myChart.setOption(opt);
}
updateMap(0);
博主目前的主机ip：http://8.136.155.57/
2、Python
把index.html文件和control.js文件放入爬虫文件同目录中
我们在html中内部数据js改写成引用外部js文件，通过Python爬取疫情人数后写成js文件达到数值实时化。
Python爬取代码：
# -*- coding: utf-8 -*-
import urllib.request
import urllib
# 1、网址url
url = 'https://zaixianke.com/yq/all'
# 2、创建request请求对象
request = urllib.request.Request(url)
# 3、发送请求获取结果
response = urllib.request.urlopen(request)
htmldata = response.read()
# 4、设置编码方式
htmldata = htmldata.decode('utf-8')
# 5、打印结果
print(htmldata)
# 7、爬取数据保存到文件
htmldata=("var data ="+htmldata)
fileOb = open('value.js','w',encoding='utf-8') #打开value.js文件，没有就新建一个
fileOb.write(htmldata)
fileOb.close()
运行后如果没用value.js文件会发现多了一个，并且把需要的data写入了，此时我们打开index.html可以看到我们显示的实时数据了。
~ 完 ~
扫一扫
1096
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
