制作自己的“疫情地图”
概述
本文结合最新的疫情数据，打造属于自己的疫情地图。
效果
疫情地图
布局
布局采用一张图的思路，将疫情信息以浮动框的形式飘在地图上，分别为：图例，置于左下角；统计数据，置于右下角；汇总数据以及数据源说明，置于右上角；左上角区域，添加地图说明。
数据
制作一张这样的地图，需要两类数据：1、疫情数据；2、区划数据。其中，为了展示合理，在区划数据里面我又添加了一省会城市的数据。
1. 疫情数据
疫情数据从百度获取而来，将获取到的数据转换为CSV，并通过网页工具csv2json转换为格式，方便使用。
疫情数据
2. 区划数据
按照上述说明，区划数据有两份，一份是省级区划面数据，一份是省会城市数据，数据格式分别如下：
省级区划面数据
省会城市数据
实现
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>疫情地图</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
</head>
<body>
<div id="app">
<div class="title">
<img src="css/logo.jpg" alt="logo">
<span>疫情地图</span>
</div>
<div class="statics">
<div class="tips">
<b>数据来源：</b>国家卫健委
</div>
<table cellspacing="0" cellpadding="0">
<tr>
<th style="color: red;">
{{ getStatics.diagnosed }}
</th>
<th style="color: darkgreen;">
{{ getStatics.cure }}
</th>
<th style="color: grey;">
{{ getStatics.death }}
</th>
</tr>
<tr>
<td>确诊病例</td>
<td>治愈病例</td>
<td>死亡病例</td>
</tr>
</table>
</div>
<div id="map">
<div class="overlay" id="overlay">
<ul>
<li> {{ selected && selected.name }} </li>
<li>
<b>确诊：</b> <span style="color: red;">{{ selected && selected.diagnosed }}</span>
</li>
<li>
<b>治愈：</b> <span style="color: darkgreen;">{{ selected && selected.cure }}</span>
</li>
<li>
<b>死亡：</b> <span style="color: grey;">{{ selected && selected.death }}</span>
</li>
</ul>
</div>
</div>
<ul class="legend">
<li>
图例
</li>
<li
v-for="(item, index) in colorMap"
:key="index">
<span :style="{backgroundColor: item.color}"></span>
{{ item.label }}
</li>
</ul>
<div class="table">
<table cellspacing="0" cellpadding="0">
<tr>
<th width="60">地区</th>
<th width="45">确诊</th>
<th width="45">治愈</th>
<th width="45">死亡</th>
</tr>
</table>
<div class="tbody">
<table cellspacing="0" cellpadding="0">
<tr
v-for="(item, index) in epidemicArray"
:key="index">
<td width="60" :style="{color: index < 5 ? 'red' : 'black'}">{{ item.zone }}</td>
<td width="45" style="color: red;">{{ item.diagnosed }}</td>
<td width="45" style="color: darkgreen;">{{ item.cure }}</td>
<td width="45" style="color: grey;">{{ item.death }}</td>
</tr>
</table>
</div>
</div>
</div>
<script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>js
var that, map;
var app = new Vue({
el: '#app',
data: {
sum: 0,
epidemicArray: [],
epidemicData: {},
colorMap: [
{
label: '≥10000',
color: '#660208'
},
{
label: '1000-9999',
color: '#8c0d0d'
},
{
label: '100-999',
color: '#cc2929'
},
{
label: '10-99',
color: '#ff7b69'
},
{
label: '1-9',
color: '#ffaa85'
}
],
vector: null,
overlay: null,
selected: null
},
mounted() {
that = this;
that.init();
},
computed: {
getStatics() {
let diagnosed = 0;
let cure = 0;
let death = 0;
for (var i = 0; i < this.epidemicArray.length; i++) {
const d = this.epidemicArray[i];
diagnosed += d.diagnosed;
cure += d.cure;
death += d.death;
}
return {
diagnosed: diagnosed,
cure: cure,
death: death
}
}
},
methods: {
init() {
$.get('data/data.json', res => {
that.epidemicArray = res;
for (var i = 0; i < res.length; i++) {
var r = res[i];
that.sum += r.diagnosed;
that.epidemicData[r.zone] = r;
}
$.get('data/capital.json', _res => {
for (var j = 0; j < res.length; j++) {
var _r = _res[j];
if (that.epidemicData[_r.name]) that.epidemicData[_r.name].center = [_r.lon, _r.lat];
}
that.initMap();
})
})
},
initMap() {
var vectorSource = new ol.source.Vector({
url: "data/china.json",
format: new ol.format.GeoJSON()
});
that.vector = new ol.layer.Vector({
source: vectorSource,
style: that.styleFunction
});
map = new ol.Map({
controls: ol.control.defaults({
attribution: false
}),
target: 'map',
layers: [
that.vector
],
view: new ol.View({
minZoom: 3,
maxZoom: 12,
center: [11760366.56, 4662347.84],
zoom: 5
})
});
that.addMapEvent();
that.addOverlay();
},
addMapEvent() {
map.on('pointermove', evt => {
map.getTargetElement().style.cursor = '';
that.selected = null;
that.overlay.setPosition(null);
if (map.hasFeatureAtPixel(evt.pixel)) {
map.getTargetElement().style.cursor = 'pointer';
const feature = map.getFeaturesAtPixel(evt.pixel)[0];
const name = feature.get('name');
that.selected = that.epidemicData[name];
that.selected.name = name;
const data = that.epidemicData[name];
const center = data.center;
that.overlay.setPosition(ol.proj.fromLonLat(center));
}
that.vector.setStyle(that.styleFunction);
});
},
addOverlay() {
const container = document.getElementById('overlay');
that.overlay = new ol.Overlay({
element: container,
position: null,
positioning: 'bottom-center',
offset: [0, -20]
});
map.addOverlay(that.overlay);
},
styleFunction(feat) {
const name = feat.get('name');
const data = that.epidemicData[name];
const num = data.diagnosed;
const center = data.center;
const color = that.getColor(num);
const selected = that.selected && name === that.selected.name;
let styles = [];
styles.push(new ol.style.Style({
fill: new ol.style.Fill({
color: color
}),
stroke: new ol.style.Stroke({
color: selected ? '#00ffff' : '#eeeeee',
width: selected ? 3 : 1
})
}));
styles.push(new ol.style.Style({
geometry: new ol.geom.Point(ol.proj.fromLonLat(center)),
text: new ol.style.Text({
text: name,
fill: new ol.style.Fill({
color: '#ffffff'
})
})
}));
return styles;
},
getColor(num) {
for (var i = 0; i < that.colorMap.length; i++) {
var c = that.colorMap[i];
if (c.label.indexOf('-') !== -1) {
var nums = c.label.split('-').map(Number);
if (num >= nums[0] && num <= nums[1]) {
return c.color;
}
} else {
var nums = c.label.split('≥').map(Number);
if (num >= nums[1]) {
return c.color;
}
}
}
}
}
})scss
@charset "utf-8";
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 5px;
height: 5px;
background-color: #F9F9F9;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 3px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #999;
}
#app,
#map,
body,
html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 16px;
.ol-zoom {
display: none;
}
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
.overlay {
padding: 10px;
background-color: rgba(255, 255, 255, 0.85);
overflow: hidden;
border-radius: 5px;
box-shadow: 1px 1px 3px #eeeeee;
&:after {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:after {
border-top-color: rgba(255, 255, 255, 0.85);
border-width: 10px;
left: calc(50% - 10px);
}
ul {
li {
height: 25px;
line-height: 25px;
&:first-child {
font-weight: bold;
height: 30px;
line-height: 30px;
}
}
}
}
.title {
position: fixed;
top: 15px;
left: 15px;
z-index: 99;
text-align: left;
img {
width: 70px;
height: 70px;
vertical-align: middle;
}
span {
display: inline-block;
height: 80px;
line-height: 80px;
font-size: 24px;
font-weight: bold;
letter-spacing: 3px;
text-shadow: 2px 2px 5px #000;
color: white;
}
}
.statics {
position: fixed;
top: 20px;
right: 20px;
z-index: 99;
overflow: hidden;
.tips {
text-align: right;
height: 40px;
line-height: 40px;
}
table {
width: 100%;
background-color: rgba(200, 200, 200, 0.1);
border-radius: 5px;
th,
td {
width: calc(100% / 3);
padding: 3px 15px;
}
th {
font-size: 20px;
}
td {
text-align: center;
}
}
}
.legend {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 99;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 5px;
box-shadow: 1px 1px 3px #eeeeee;
white-space: nowrap;
padding: 5px;
li {
height: 25px;
line-height: 25px;
padding: 0 10px;
&:first-child {
font-weight: bold;
}
span {
display: inline-block;
width: 24px;
height: 12px;
margin-right: 3px;
}
}
}
.table {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99;
overflow: hidden;
background-color: rgba(255, 255, 255, 0.6);
border-radius: 5px;
box-shadow: 1px 1px 3px #eeeeee;
white-space: nowrap;
padding: 10px 0 10px 5px;
.tbody {
max-height: 150px;
overflow-y: auto;
margin-top: 6px;
tr {
&:nth-child(2n) {
background-color: rgba(200, 200, 200, 0.1);
}
td {
text-align: right;
&:first-child {
text-align: left;
}
}
}
}
table {
td,
th {
padding: 5px 8px;
}
}
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-02-16 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读