任务结果

先发个我们最后要实现的页面

然后我们解释如何一步步得到这个结果的：

一、云服务器的搭建

1、购买服务器，如果是测试可以选择《按量付费》，
2、操作系统选择：宝塔linux面板（在镜像市场中选择）
宝塔Linux管理面板是一个功能强大且终身免费的Linux服务器管理软件，可以一键部署：LAMP/LNMP/Tomcat/Node.js、网站、数据库、FTP、SSL，通过Web端轻松管理服务器。
3、宽带计费模式按：按使用流量
4、对实例进行网络和安全组->安全组配置->配置规则；添加端口80-授权对象0.0.0.0；端口8888-授权对象IP（可以写管理服务器IP，这个IP，管理员才能登陆）
5、在浏览器中输入ecs服务器的公网ip:8888, 根据提示自定义你的管理员账号和密码.
----如果不存在账号密码自定义页面, 可以按照下图流程获取默认账户和密码

6、进入宝塔控制面板后 , 进入软件商店,搜索tomcat后点击安装，安装后, 如图搜索tomcat, 将端口号与安全配置中的设成一致：
Connector port=“80”;点保存；重启tomcat；
7、点击进入tomcat安装的文件夹 , 并进入 webapps文件夹，将你编写的index.jsp,control.js文件上传到 webapps/ROOT文件夹中 , 即可通过 ip地址来访问你的JSP（ROOT文件下的index.jsp就是IP地址对应的默认页面内容）

二、疫情地图的代码实例

index.jsp的代码实例：

<%@ page session="false" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8" %>
<%@ page import="java.net.URL" %>
<%@ page import="java.net.URLConnection" %>
<%@ page import="java.io.InputStream" %>
<%@ page import="java.io.InputStreamReader" %>
<%@ page import="java.io.BufferedReader" %><!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">
<%URL u1 = new URL("https://zaixianke.com/yq/all");URLConnection conn = u1.openConnection();InputStream is = conn.getInputStream();BufferedReader br = new BufferedReader(new InputStreamReader(is,"UTF-8"));String text1 = br.readLine();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: rgb(51, 51, 51); display: none;" 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>

control.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: '新冠疫情-国内累计数据',},// 数据提示框tooltip: {trigger: 'item', // item放到数据区域触发formatter: function (params, ticket, callback) {if(params.data)return params.name+'<br/>'+params.data.value+' (人)';elsereturn 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: '新冠疫情-国内新增数据',},// 数据提示框tooltip: {trigger: 'item', // item放到数据区域触发formatter:  function (params, ticket, callback) {if(params.data)return params.name+'<br/>'+params.data.value+' (人)';elsereturn 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: '新冠疫情-全球累计数据',},// 数据提示框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+' (人)';elsereturn params.name+'<br/> 未公布感染人数';}},// 视觉映射方案1：,疫情颜色根据传染病疫情等级分类为5个级别：黄色-橙色-深橙色-红色-深红色// 为了是视觉分布更好，可以添加更多的颜色范围，然后适当调小max的值，因为美国和其它国家相差太大/**/visualMap: {min: 1, // 颜色映射对应的最小值，即对应下面的lightskybluemax: 500000, // 颜色映射对应的最大值，即对应下面的orangeredtext: ['严重', '轻微'], // 映射图上下标记文本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: '新冠疫情-全球新增数据',},// 数据提示框tooltip: {trigger: 'item', // item放到数据区域触发formatter:function (params, ticket, callback) {if(params.data)return params.name+'<br/>'+params.data.value+' (人)';elsereturn 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);

三、访问加速

策略一、用缓存的方式提升服务器相应速度；根据网页数据的更新频率，设定在未更新期间的访问不需要重新从数据源处加载，直接复用；
策略二、采用全站加速DCDN功能，让服务器自动给访问用户提供访问快速的服务器

小知识：网址组成分析

网址的组成: 协议://域名:端口号/虚拟路径?参数列表#锚点
协议: 用于计算机与计算机之间交流的协议，用于传输速率，传输编码，出错的控制等等。
http:超文本传输协议，默认端口号:80 https:安全超文本传输协议，默认端口号:443
域名:ip地址的别名。ip地址是计算机在互联网中的唯一表示，192.168.1.1
端口号:范围:0-65535.
虚拟路径:通过路径的方式，来管理服务器中的文件资源。参数列表:向服务器发送的数据，每一个参数都是一个键值对，键和值之间通过=号连接，多个键值对之间通过&分割。

最后：感谢开课吧提供的对应公开实例课程。

疫情地图网页版代码实例相关推荐

百度高德位置定位服务器,调用百度、高德地图App，百度地图网页版，App定位
1.首先判断是否安装了目标地图App //判断是否安装目标应用 public static boolean isInstallByread(String packageName) { return n ...
基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div class=" ...
利用HTML实现一个个人信息表的网页（代码实例）
本篇文章给大家带来的内容是关于利用HTML实现一个个人信息网页(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 打造全网web前端全栈资料库(总目录)看完学的更快,掌握的更 ...
谷歌地图网页版_【软件】谷歌地球，带你看遍全球美景，快来神游吧Google Earth...
假期出游哪里玩? 今天小川带你宅在家里看地球. 一直没有机会去的地方,比如金字塔.卢浮宫之类的,可以在线体验一下. 谷歌地球是谷歌公司开发的一款能查看整个地球的卫星图.航拍的应用,而且很多地方带有3D ...
php显示提交的个人信息,利用HTML实现一个个人信息表的网页（代码实例）
本篇文章给大家带来的内容是关于利用HTML实现一个个人信息网页(代码实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对HTML标签的总结 1.学习的行内标签和块级元素分别有哪 ...
google地图网页版_谷歌收录查询方法大全，如何让Google快速收录网页？
谷歌收录是指,Google有没有将你的网页,放入自己的数据库.这样可以在谷歌seo的时候,达到可以通过自然流量搜索到你,并且产生询盘.订单等目的.在过去的几年,也就是Google缺数据的时候,你的谷歌 ...
html网页底部代码实例,HTML网页头部代码实例详解H 这个首页的html5网站
这个首页的html5网站设计代码(尤其是头部那登录注首先先说一下HTML5的代码只是在原有的XHTML基础上增加了一些新的标签(还有一些新的特性,例如数据库和缓存等特性) 以下为此页面的结构代码: 页 ...
Python爬虫抓取指定网页图片代码实例
更多编程教程请到:菜鸟教程 https://www.piaodoo.com/ 友情链接:好看站 http://www.nrso.net/ 高州阳光论坛https://www.hnthzk.com/ 想 ...
电脑微博批量删除-2023怎么批量删除微博网页版代码
微博怎么快速批量删除_微博怎么把删除所有微博你可以用它来批量删除微博.微博批量删除收藏和微博批量删除点赞内容,避免别人挖坟. 「2023批量删除微博工具」批量删除微博代码_手机暂时不能批量删除微博 ...

疫情地图网页版代码实例

任务结果

一、云服务器的搭建

二、疫情地图的代码实例

三、访问加速

小知识：网址组成分析

疫情地图网页版代码实例相关推荐

最新文章

热门文章

疫情地图网页版代码实例

任务结果

一、云服务器的搭建

二、疫情地图的代码实例

三、访问加速

小知识： 网址组成分析

疫情地图网页版代码实例相关推荐

最新文章

热门文章

小知识：网址组成分析