目錄

前言

一、后臺數(shù)據(jù)服務(wù)設(shè)計(jì)

1、數(shù)據(jù)庫查詢

2、模型層對象設(shè)計(jì)?

3、業(yè)務(wù)層和控制層設(shè)計(jì)

二、Echarts前端配置

1、地圖的展示

2、次數(shù)排名統(tǒng)計(jì)

三、最終結(jié)果展示

1、地圖展示

2、圖表展示

總結(jié)

---

前言

????????在之前的博客中基于SpringBoot和PotsGIS的各省地震震發(fā)可視化分析，在這篇博客中采用二維地圖的展現(xiàn)形式對全國各省的地震震發(fā)情況進(jìn)行了綜合展示。博客發(fā)布之后，有小伙伴找到博主說，對于Leaflet等地圖可視化框架不熟悉，能不能使用echarts進(jìn)行替代方案開發(fā)。同時在地圖分析的同時，能否加上一些統(tǒng)計(jì)圖表，讓數(shù)據(jù)更加直觀。在此基礎(chǔ)上，就有了本文編寫的初衷。

????????本文主要面向?qū)τ贚eaflet等gis可視化框架不熟悉的朋友，在不使用gis可視化框架的同時進(jìn)行地圖應(yīng)用的開發(fā)。本文將重點(diǎn)講解如何使用SpringBoot進(jìn)行后端接口的開發(fā)，基于后端java語言，直接構(gòu)造前端echarts圖表展示需要的數(shù)據(jù)。文章的最后，我們會輸出一個使用Echarts開發(fā)的全國各省地震震發(fā)情況統(tǒng)計(jì)圖、全國地震次數(shù)排名前10名和倒數(shù)10名(相對安全)的省份以及完整的統(tǒng)計(jì)數(shù)據(jù)列表。雖然在之前的博客中也對echarts組件進(jìn)行了一些介紹，溫故而知新，這里不僅回顧了一些地圖開發(fā)的基礎(chǔ)知識，同時結(jié)合地震各省份分布統(tǒng)計(jì)的需求場景更加有助朋友們理解。

一、后臺數(shù)據(jù)服務(wù)設(shè)計(jì)

????????后臺數(shù)據(jù)主要用于為前端提供數(shù)據(jù)來源，將各省份的地震震發(fā)數(shù)據(jù)從數(shù)據(jù)庫中查詢出來，然后以json的形式為前端提供。閑言少敘，下面直接進(jìn)行正式的代碼編寫?；A(chǔ)采用的技術(shù)框架都是熟悉的框架，在之前的博客中也對開發(fā)框架進(jìn)行了介紹，不再贅述。

1、數(shù)據(jù)庫查詢

????????為了能實(shí)現(xiàn)全國各個省份數(shù)據(jù)和地震信息進(jìn)行關(guān)聯(lián)查詢，同時根據(jù)省份編碼進(jìn)行分組查詢。這里涉及的表有兩張。第一張是biz_province（全國省份行政區(qū)劃信息表），另一張表是我們之前采集的biz_earthquake_info（地震信息表）。通過空間計(jì)算，將地震信息表中的位置和省份表進(jìn)行包含計(jì)算，將地震信息包含在省份面中納入所屬省份口徑。

圖 1 省份信息表

圖2 地震信息表

?????????我們使用一下語句進(jìn)行空間計(jì)算和分組統(tǒng)計(jì)計(jì)算：

select p.code data_id,max(p.name) data_name,count(1) data_value  from biz_province p,biz_earthquake_info t where st_contains(p.geom, ST_GeomFromText(format('point(%s %s)',t.eq_lng,t.eq_lat),4326))group by p.code order by data_value desc;

????????將以上的sql語句在數(shù)據(jù)庫中執(zhí)行以后可以得到一下結(jié)果：

2、模型層對象設(shè)計(jì)?

????????模型層對象主要包括統(tǒng)計(jì)的視圖對象即VO，還有業(yè)務(wù)層對象，比如數(shù)據(jù)訪問層對象和業(yè)務(wù)對象。數(shù)據(jù)訪問層對象將數(shù)據(jù)庫中查詢的結(jié)果寫入到視圖對象中。首先來看一下視圖對象的定義，為了方便在echarts中進(jìn)行展示，我們將展示的值分成統(tǒng)計(jì)指標(biāo)、唯一id、統(tǒng)計(jì)指標(biāo)值。對應(yīng)的視圖對象如下，這個類其實(shí)是通用的，一般的統(tǒng)計(jì)值都可以用這個視圖對象來接收值：

package com.yelang.project.extend.earthquake.domain;
import java.io.Serializable;
import java.math.BigDecimal;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;
@NoArgsConstructor
@AllArgsConstructor
@Setter
@Getter
@ToString
public class EarthQuakeProvinceStatVO implements Serializable{private static final long serialVersionUID = 5394617081879927259L;private String dataId;private String dataName;private BigDecimal dataValue;
}

????????定義好了視圖對象之后，我們還需要將數(shù)據(jù)庫的sql語句在代碼中執(zhí)行，在數(shù)據(jù)訪問層中執(zhí)行以下代碼完成數(shù)據(jù)訪問。從性能的角度考慮，我們可以把這個查詢結(jié)果進(jìn)行緩存，在下一次數(shù)據(jù)展示的時候可以提高訪問速度，這里為了減少不必要的代碼，咱不提供實(shí)現(xiàn)。

static final String FIND_EARTH_QUAKE_LIST = "<script>"+ "select p.code data_id,max(p.name) data_name,count(1) data_value  from biz_province p,biz_earthquake_info t where "+ " st_contains(p.geom, ST_GeomFromText(format('point(%s %s)',t.eq_lng,t.eq_lat),4326)) "+ " group by p.code order by data_value desc "+ "</script>";/*** 全國各省地震震發(fā)統(tǒng)計(jì)* @return*/@Select(FIND_EARTH_QUAKE_LIST)List<EarthQuakeProvinceStatVO> findEarthQuakeStatList();

3、業(yè)務(wù)層和控制層設(shè)計(jì)

????????相對而言，這里將重點(diǎn)介紹業(yè)務(wù)層的設(shè)計(jì)。我們將在后臺采用com.github.abel533.echarts組件直接生成前端所需要的echarts數(shù)據(jù)。兩個省份地震次數(shù)排名柱狀統(tǒng)計(jì)圖幾乎是一致的。在這里將生成圖表數(shù)據(jù)的方法統(tǒng)一封裝出來，根據(jù)不同的數(shù)據(jù)源傳入來生成。關(guān)鍵代碼如下：

public String convert2ProvinceLine(List<EarthQuakeProvinceStatVO> dataList) {String result = "";GsonOption option = new GsonOption();option.title().text("各省地震震發(fā)次數(shù)統(tǒng)計(jì)圖（單位：次）");option.tooltip().trigger(Trigger.axis);option.legend("地震次數(shù)");option.legend().y(Y.bottom).padding(0);option.toolbox().show(true).feature(new MagicType(Magic.line, Magic.bar).show(true), Tool.saveAsImage);option.calculable(true);List<String> provinces = new ArrayList<String>();List<Integer> eqCounts = new ArrayList<Integer>();for (EarthQuakeProvinceStatVO vo : dataList) {provinces.add(vo.getDataName());eqCounts.add(vo.getDataValue().intValue());}CategoryAxis categoreAxis = new CategoryAxis();categoreAxis.data(provinces.toArray()).axisLabel().interval(0).rotate(20);option.xAxis(categoreAxis);option.yAxis(new ValueAxis());Bar bar = new Bar("地震次數(shù)");bar.data(eqCounts.toArray());bar.markPoint().data(new PointData().type(MarkType.max).name("最大值"), new PointData().type(MarkType.min).name("最小值"));bar.markLine().data(new PointData().type(MarkType.average).name("平均值"));option.series(bar);result = option.toString();return result;}

????????兩個生成前top10，和倒數(shù)top10的ehcarts數(shù)據(jù)方法如下：

@Override
public String buildProvinceLineMaxTop10(List<EarthQuakeProvinceStatVO> dataList) {List<EarthQuakeProvinceStatVO> top10  = new ArrayList<EarthQuakeProvinceStatVO>(10);for(int i =0;i<10;i++) {top10.add(dataList.get(i));}return convert2ProvinceLine(top10);
}@Override
public String buildProvinceLineMinTop10(List<EarthQuakeProvinceStatVO> dataList) {List<EarthQuakeProvinceStatVO> top10  = new ArrayList<EarthQuakeProvinceStatVO>(10);for(int i = dataList.size() - 1;i> dataList.size() - 11;i--) {top10.add(dataList.get(i));}return convert2ProvinceLine(top10);
}

二、Echarts前端配置

????????完事具備，只欠東風(fēng)。在后端將相應(yīng)的數(shù)據(jù)和接口都準(zhǔn)備妥當(dāng)之后，我們來進(jìn)行前端的界面開發(fā)。對echarts進(jìn)行初始化。在地圖開發(fā)過程當(dāng)中有一些需要注意的地方，一定需要注意。

1、地圖的展示

????????地圖的展示，這里采用echarts的map組件，因?yàn)樵诮M件采用的時候已經(jīng)默認(rèn)注冊了china這個圖源。因此我們可以直接使用，而無需再次注入。首先需要定義map的掛載組件。

<div id="tab-1" class="tab-pane active"><div class="panel-body"><div class="row"><div class="col-sm-12"><div class="ibox float-e-margins"><div class="ibox-content"><div style="height:600px" id="echarts-map-chart"></div></div></div></div></div></div></div>

????????地圖的展示元素設(shè)置好之后，需要采用javascript的方式對數(shù)據(jù)進(jìn)行設(shè)置。下面是關(guān)鍵代碼：

mapChart = echarts.init(document.getElementById("echarts-map-chart"));mapoption = {title : {text: '全國各省地震次數(shù)統(tǒng)計(jì)',subtext: '數(shù)源來源中國國家地震局，單位：次',x:'left'},tooltip : {trigger: 'item'},legend: {orient: 'vertical',x:'right',y:'center',data:['地震次數(shù)']},dataRange: {min: 0,max: 2300,x: 'left',y: 'bottom',text:['高','低'],           // 文本，默認(rèn)為數(shù)值文本calculable : true},toolbox: {show: true,orient : 'vertical',x: 'right',y: 'bottom',feature : {mark : {show: true},dataView : {show: true, readOnly: false},restore : {show: true},saveAsImage : {show: true}}},roamController: {show: true,x: 'right',mapTypeControl: {'china': true}},series : [{name: '地震次數(shù)',type: 'map',mapType: 'china',roam: false,zoom:1.2,//視覺比例大小,1.2即為原有大小的1.2倍itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}}},data:[]}]};initProvinceMap();//地圖初始化

????????下面是地圖初始化的核心邏輯，這里采用ajax的方式進(jìn)行數(shù)據(jù)加載，先給出核心代碼：

function initProvinceMap(){$.ajax({url: ctx + "eq/province/echartslist",data: {},dataType : "json",success: function(serverdata){if(serverdata != ""){var serverJsonData = serverdata.data;var jsonData = new Array();for(var i=0;i<serverJsonData.length;i++){var pname = serverJsonData[i].dataName;if(pname.indexOf("黑龍江") != -1 || pname.indexOf("內(nèi)蒙古") != -1){pname = pname.substring(0,3);}else{pname = pname.substring(0,2);}jsonData.push({name: pname,value: serverJsonData[i].dataValue});}mapoption.series[0].data=jsonData;mapChart.setOption(mapoption,true);$(window).resize(mapChart.resize);charts.push(mapChart);}},error:function(data){parent.layer.alert('系統(tǒng)發(fā)生錯誤！', {icon: 5});}});}

????????這里需要注意地方是，echarts中的各省份名稱是不太準(zhǔn)確的，比如新疆維吾爾族自治區(qū)，湖南省，北京市等等。省級行政區(qū)域名稱只取了前兩位，而黑龍江和內(nèi)蒙古則是取了前3位。這里采用的方式是采用前端數(shù)據(jù)構(gòu)造的方法，將后端的數(shù)據(jù)按照echarts的規(guī)范來準(zhǔn)換。因此在上述代碼中，對于黑龍江等省份截取前3位。其它省份或者直轄市自治區(qū)采用截取前2位的方式。

2、次數(shù)排名統(tǒng)計(jì)

????????次數(shù)排名統(tǒng)計(jì)，我們設(shè)計(jì)了兩個柱狀統(tǒng)計(jì)圖，分別從次數(shù)最多和最少分別取前10進(jìn)行數(shù)據(jù)展示。為了完整顯示全國各省份的主要信息，我們也提供完整的數(shù)據(jù)表格清單。柱狀統(tǒng)計(jì)圖的關(guān)鍵代碼如下：

provinceLineChart = echarts.init(document.getElementById("echarts-province-chart"));
minprovinceChart = echarts.init(document.getElementById("echarts-minprovince-chart"));
$(window).resize(provinceLineChart.resize);
$(window).resize(minprovinceChart.resize);
charts.push(provinceLineChart);
charts.push(minprovinceChart);
initProvinceChart();

????????同樣圖表的數(shù)據(jù)初始化采用ajax的方式調(diào)用，關(guān)鍵代碼如下：

function initProvinceChart(){$.ajax({type: "POST",url: ctx + "eq/province/echarts/provinceline",data: {},dataType : "json",success: function(serverdata){if(serverdata != ""){var serverJsonData = eval('('+serverdata.maxdata+')');provinceLineChart.setOption(serverJsonData,true);$(window).resize(provinceLineChart.resize);var minData = eval('('+serverdata.mindata+')');minprovinceChart.setOption(minData,true);$(window).resize(minprovinceChart.resize);}},error:function(data){parent.layer.alert('系統(tǒng)發(fā)生錯誤！', {icon: 5});}});}

三、最終結(jié)果展示

????????經(jīng)過前后端功能的設(shè)計(jì)和開發(fā)，在完成上述代碼的開發(fā)之后，我們來看一下實(shí)際的效果。看看全國各省的地震震發(fā)情況究竟是怎么樣的。

1、地圖展示

????????通過echarts圖表可以很清楚的看到，在我國的西北和西南，地震的震發(fā)次數(shù)是非常多，地殼活動也是非常的活躍，新疆維吾爾族自治區(qū)，從次數(shù)來看一騎絕塵，新疆的地震次數(shù)還是非常多的（從公開數(shù)據(jù)來看）都變成紅色的。 具體的數(shù)據(jù)可以使用鼠標(biāo)懸浮到對應(yīng)省份上會懸浮提示地震的次數(shù)，如下圖所示：

2、圖表展示

????????圖表展示將根據(jù)地震的震發(fā)次數(shù)，將次數(shù)最多的top10和最少的top10進(jìn)行展示。方便大家對全國的相關(guān)數(shù)據(jù)有一個直觀的掌握。首先來看一下地震次數(shù)最多的前10名是哪幾個省份。

?????????地震次數(shù)最多的前10名依次是：新疆維吾爾自治區(qū)、四川省、西藏自治區(qū)、云南省、青海省、河北省、臺灣省、內(nèi)蒙古自治區(qū)、遼寧省。看完次數(shù)最多前10的，再來看安全系數(shù)最高的那幾個省。

????????按照次數(shù)分別是上海市、海南省、江西省、湖南省、福建省、天津市、北京市、河南省、山東省、江蘇省。 其它沒有進(jìn)入統(tǒng)計(jì)圖的省份具體次數(shù)如下：

總結(jié)

????????以上就是本文的主要內(nèi)容，本文主要面向?qū)τ贚eaflet等gis可視化框架不熟悉的朋友，在不使用gis可視化框架的同時進(jìn)行地圖應(yīng)用的開發(fā)。本文將重點(diǎn)講解如何使用SpringBoot進(jìn)行后端接口的開發(fā)，基于后端java語言，直接構(gòu)造前端echarts圖表展示需要的數(shù)據(jù)。文章的最后，我們會輸出一個使用Echarts開發(fā)的全國各省地震震發(fā)情況統(tǒng)計(jì)圖、全國地震次數(shù)排名前10名和倒數(shù)10名(相對安全)的省份以及完整的統(tǒng)計(jì)數(shù)據(jù)列表。行文倉促，難免有諸多不足之處，歡迎朋友們在評論區(qū)批評指正，萬分感謝。