目錄
前言
一、后臺(tái)管理設(shè)計(jì)與實(shí)現(xiàn)
1、Model層
2、業(yè)務(wù)層
3、控制層
二、前端預(yù)警可視化設(shè)計(jì)與實(shí)現(xiàn)
1、網(wǎng)頁結(jié)構(gòu)
2、數(shù)據(jù)綁定
三、效果展示
總結(jié)
前言
????????在之前的幾篇博客中，我們講解了如何在Leaflet中進(jìn)行預(yù)警信息提示效果，以及基于XxlCrawler進(jìn)行中國(guó)地震臺(tái)網(wǎng)信息的采集、入庫以及如何進(jìn)行反爬處理。博文目錄如下，感興趣的朋友可以點(diǎn)擊標(biāo)題進(jìn)入：
| 序號(hào) | 博客地址 |
| 1 | 基于Leaflet.js的Marker閃爍特效的實(shí)現(xiàn)-模擬預(yù)警 |
| 2 | 基于Java的XxlCrawler網(wǎng)絡(luò)信息爬取實(shí)戰(zhàn)-以中國(guó)地震臺(tái)網(wǎng)為例 |
| 3 | 使用SpringBoot將中國(guó)地震臺(tái)網(wǎng)數(shù)據(jù)保存PostGIS數(shù)據(jù)庫實(shí)踐 |
| 4 | 在Java中使用XxlCrawler時(shí)防止被反爬的幾種方式 |
????????在實(shí)際應(yīng)用中，我們不僅需要將數(shù)據(jù)及時(shí)的采集回來，同時(shí)也需要實(shí)現(xiàn)對(duì)數(shù)據(jù)進(jìn)行可視化。不僅對(duì)二維數(shù)據(jù)的列表展示，同時(shí)還需要對(duì)數(shù)據(jù)進(jìn)行空間可視化。
????????本文即對(duì)采集回來的中國(guó)地震臺(tái)網(wǎng)數(shù)據(jù)進(jìn)行預(yù)警可視化進(jìn)行深入講解。首先講解后臺(tái)的代碼和功能設(shè)計(jì)，然后基于L.Icon.Pulse進(jìn)行地震預(yù)警展示，最后展示預(yù)警可視化效果。地址災(zāi)害不可預(yù)測(cè)，但是我們?cè)跒?zāi)后應(yīng)該快速提供應(yīng)急救援，將盡量減少人民群眾的生命財(cái)產(chǎn)損失。如果您目前也有類似的需求，不妨來博文中指導(dǎo)一二。
一、后臺(tái)管理設(shè)計(jì)與實(shí)現(xiàn)
????????后臺(tái)管理使用SpringBoot框架來開發(fā)，數(shù)據(jù)庫訪問層依然采用熟悉的Mybatis-Plus框架。本小節(jié)將主要基于MVC結(jié)構(gòu)介紹后臺(tái)的相關(guān)設(shè)計(jì)與實(shí)現(xiàn)。數(shù)據(jù)后臺(tái)提供數(shù)據(jù)訪問支持，為前臺(tái)的數(shù)據(jù)展示提供有效支撐。
1、Model層
????????model層包含地震臺(tái)網(wǎng)數(shù)據(jù)的實(shí)體類，在之前的博客中有過介紹，這里也將主要的代碼分享出來。讓大家在熟悉這部分代碼時(shí)，不至于有不適感：
package com.yelang.project.extend.earthquake.domain.crawler;
import java.io.Serializable;
import java.math.BigDecimal;
import java.util.Date;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.google.gson.annotations.SerializedName;
import com.yelang.framework.handler.PgGeometryTypeHandler;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.ToString;
@Data
@ToString
@AllArgsConstructor
@NoArgsConstructor
@TableName(value ="biz_ceic_earthquake",autoResultMap = true)
public class CeicEarthquake implements Serializable{
private static final long serialVersionUID = -1212153879708670015L;
@TableId(value="pk_id")
private Long pkId;//主鍵
@SerializedName("AUTO_FLAG")
@TableField(value="auto_flag")
private String autoFlag;
@SerializedName("CATA_ID")
@TableField(value="cata_id")
private String cataId;
@SerializedName("CATA_TYPE")
@TableField(value="cata_type")
private String cataType;
@SerializedName("EPI_DEPTH")
@TableField(value="epi_depth")
private BigDecimal epiDepth = new BigDecimal("0.0");
@SerializedName("EPI_LAT")
@TableField(value="epi_lat")
private String epiLat;//緯度
@SerializedName("EPI_LON")
@TableField(value="epi_lon")
private String epiLon;
@SerializedName("EQ_CATA_TYPE")
@TableField(value="eq_cata_type")
private String eqCataType;
@SerializedName("EQ_TYPE")
@TableField(value="eq_type")
private String eqType;
@SerializedName("IS_DEL")
@TableField(value="is_del")
private String isDel;
@SerializedName("LOCATION_C")
@TableField(value="location_c")
private String locationC;
@SerializedName("LOCATION_S")
@TableField(value="location_s")
private String locationS;
@SerializedName("LOC_STN")
@TableField(value="loc_stn")
private String locStn;
@SerializedName("M")
@TableField(value="m")
private String m;
@SerializedName("M_MB")
@TableField(value="mmb")
private String mmb;
@SerializedName("M_MB2")
@TableField(value="mmb2")
private String mmb2;
@SerializedName("M_ML")
@TableField(value="mml")
private String mml;
@SerializedName("M_MS")
@TableField(value="mms")
private String mms;
@SerializedName("M_MS7")
@TableField(value="mms7")
private String mms7;
@SerializedName("NEW_DID")
@TableField(value="new_did")
private String newDid;
@SerializedName("O_TIME")
@TableField(value="o_time")
private Date oTime;
@SerializedName("O_TIME_FRA")
@TableField(value="o_time_fra")
private String oTimeFra;
@SerializedName("SAVE_TIME")
@TableField(value="save_time")
private Date saveTime;
@SerializedName("SUM_STN")
@TableField(value="sum_stn")
private String sumStn;
@SerializedName("SYNC_TIME")
@TableField(value="sync_time")
private Date syncTime;
@SerializedName("id")
@TableField(value="epi_id")
private String epiId;
@TableField(typeHandler = PgGeometryTypeHandler.class)
private String geom;
@TableField(exist=false)
private String geomJson;
}????????Maper層沒有其它特殊的業(yè)務(wù)，僅實(shí)現(xiàn)了基礎(chǔ)的BaseMapper，方法體內(nèi)沒有擴(kuò)展業(yè)務(wù)。在此不再贅述。?
2、業(yè)務(wù)層
????????業(yè)務(wù)層作為控制層和模型層的中間層，主要負(fù)責(zé)數(shù)據(jù)的傳遞以及業(yè)務(wù)邏輯的處理。在地震可視化中，需要擴(kuò)展的方法是需要提供按照震中位置和震級(jí)進(jìn)行模糊 查詢，同時(shí)提供按照地震主鍵查詢地震詳情的接口。在進(jìn)行地震預(yù)警時(shí)，通過ajax獲取詳情實(shí)現(xiàn)地震位置的可視化。
根據(jù)震中位置和震級(jí)模糊查詢的核心方法如下：
@Override
public List<CeicEarthquake> getList(CeicEarthquake earthquake) {
QueryWrapper<CeicEarthquake> queryWrapper = new QueryWrapper<CeicEarthquake>();
if (StringUtils.isNotBlank(earthquake.getLocationC())) {
queryWrapper.like("location_c", earthquake.getLocationC());
}
if (StringUtils.isNotBlank(earthquake.getM())) {
queryWrapper.eq("m", earthquake.getM());
}
queryWrapper.orderByDesc("o_time");
return this.baseMapper.selectList(queryWrapper);
}3、控制層
????????控制層是對(duì)接前臺(tái)，接收前臺(tái)請(qǐng)求，調(diào)用業(yè)務(wù)層的業(yè)務(wù)方法，查詢相關(guān)數(shù)據(jù)或者保存相關(guān)數(shù)據(jù)的入口。前端地圖展示和列表展示都是通過控制層實(shí)現(xiàn)。在控制層中，主要實(shí)現(xiàn)以下三個(gè)方法：
| 序號(hào) | 方法 | 說明 |
| 1 | ?public String index() | 跳轉(zhuǎn)到首頁 |
| 2 | public TableDataInfo list(CeicEarthquake earthquake) | 根據(jù)震中位置和震級(jí)查詢信息 |
| 3 | public AjaxResult detail(@PathVariable("pkId")Long pkId) | 根據(jù)數(shù)據(jù)ID查詢數(shù)據(jù)詳情 |
????????關(guān)鍵代碼如下：
package com.yelang.project.extend.earthquake.controller;
import java.util.List;
import org.apache.shiro.authz.annotation.RequiresPermissions;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.yelang.framework.aspectj.lang.annotation.Log;
import com.yelang.framework.aspectj.lang.enums.BusinessType;
import com.yelang.framework.web.controller.BaseController;
import com.yelang.framework.web.domain.AjaxResult;
import com.yelang.framework.web.page.TableDataInfo;
import com.yelang.project.extend.earthquake.domain.EarthquakeInfo;
import com.yelang.project.extend.earthquake.domain.crawler.CeicEarthquake;
import com.yelang.project.extend.earthquake.service.ICeicEarthquakeService;
@Controller
@RequestMapping("/ceiceq/info")
public class CeicEarthquakeInfoController extends BaseController{
private String prefix = "ceicearthquake/info";
@Autowired
private ICeicEarthquakeService ceicEarthQuakeService;
@RequiresPermissions("ceiceq:info:view")
@GetMapping()
public String index(){
return prefix + "/index";
}
@RequiresPermissions("ceiceq:info:list")
@PostMapping("/list")
@ResponseBody
public TableDataInfo list(CeicEarthquake earthquake){
startPage();
List<CeicEarthquake> list = ceicEarthQuakeService.getList(earthquake);
return getDataTable(list);
}
@PostMapping("/detail/{pkId}")
@ResponseBody
public AjaxResult detail(@PathVariable("pkId")Long pkId){
AjaxResult ar = AjaxResult.success();
ar.put("data", ceicEarthQuakeService.getById(pkId));
return ar;
}
}
????????到此，我們已經(jīng)將相關(guān)的服務(wù)接口開發(fā)完成，同時(shí)完成了對(duì)數(shù)據(jù)庫數(shù)據(jù)的訪問和調(diào)用。在完成后端的應(yīng)用開發(fā)之后，我們來進(jìn)行前端可視化的開發(fā)。
二、前端預(yù)警可視化設(shè)計(jì)與實(shí)現(xiàn)
????????為了在前端方便的對(duì)地震信息進(jìn)行綜合展示，我們計(jì)劃將數(shù)據(jù)和底圖使用Leaflet來進(jìn)行集成。使用之前介紹過的預(yù)警信息實(shí)現(xiàn)方式。本小節(jié)主要是面向前端的設(shè)計(jì)與實(shí)現(xiàn)。
1、網(wǎng)頁結(jié)構(gòu)
????????為了比較直觀的展示信息，同時(shí)將列表和地圖定位技術(shù)進(jìn)行結(jié)合。我們決定采用柵格布局的模式，臺(tái)網(wǎng)地震信息和地圖分別占50%。在html的框架中大致采用如下的結(jié)構(gòu)來展示：
<div class="row">
<div class="col-sm-6">
<div class="col-sm-12 search-collapse" style="display: none;">
<form id="formId">
<div class="select-list">
<ul>
<li>
<label>發(fā)震位置：</label>
<input type="text" name="locationC"/>
</li>
<li>
<label>震級(jí)：</label>
<input type="text" name="m"/>
</li>
<li>
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i> 搜索</a>
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i> 重置</a>
</li>
</ul>
</div>
</form>
</div>
<div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="eq:info:export">
<i class="fa fa-download"></i> 導(dǎo)出
</a>
</div>
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"></table>
</div>
</div>
<div class="col-sm-6">
<!-- leaflet map元素 -->
<div id="mapid" style="width: 100%;"></div>
</div>
</div>2、數(shù)據(jù)綁定
????????在定義好網(wǎng)頁框架結(jié)構(gòu)之后，我們需要將列表和后臺(tái)的接口進(jìn)行對(duì)接，同時(shí)將地圖和底圖進(jìn)行綁定。關(guān)于如何在Leaflet中進(jìn)行底圖綁定，應(yīng)該很多朋友都比較了解了。這里不再進(jìn)行過多的說明。這里僅說明如何進(jìn)行table的綁定和預(yù)警可視化。
????????table綁定：為了將地震信息，如震發(fā)地點(diǎn)、震級(jí)、地震深度、經(jīng)緯度等信息在列表中展示出來。這里采用layui的table組件。數(shù)據(jù)綁定的關(guān)鍵代碼如下：
var options = {
url: prefix + "/list",
exportUrl: prefix + "/export",
modalName: "臺(tái)網(wǎng)地震信息",
columns: [
{
field: 'id',
title: '',
visible: false
},
{
field: 'locationC',
title: '震中位置',
formatter: function(value, row, index) {
return parseFloat(row.m) >= '6.0' ? "<font color='red'>"+ value +"</font>" : value;
}
},
{
field: 'epiLon',
title: '經(jīng)度',
formatter: function(value, row, index) {
return parseFloat(row.m) >= '6.0' ? "<font color='red'>"+ value +"</font>" : value;
}
},
{
field: 'epiLat',
title: '緯度',
formatter: function(value, row, index) {
return parseFloat(row.m) >= '6.0' ? "<font color='red'>"+ value +"</font>" : value;
}
},
{
field: 'm',
title: '震級(jí)',
formatter: function(value, row, index) {
return parseFloat(row.m) >= '6.0' ? "<font color='red'>"+ value +"</font>" : value;
}
},
{
field: 'epiDepth',
title: '深度',
formatter: function(value, row, index) {
return parseFloat(row.m) >= '6.0' ? "<font color='red'>"+ value +"</font>" : value;
}
},
{
field: 'otime',
title: '發(fā)震時(shí)間',
formatter: function(value, row, index) {
return parseFloat(row.m) >= '6.0' ? "<font color='red'>"+ value +"</font>" : value;
}
},
{
title: '操作',
align: 'center',
formatter: function(value, row, index) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="preview(\'' + row.pkId + '\')"><i class="fa fa-send-o"></i></a> ');
return actions.join('');
}
}]
};
$.table.init(options);????????預(yù)警綁定：預(yù)警信息綁定是參考中國(guó)地震臺(tái)網(wǎng)的信息，在列表中點(diǎn)擊地震信息，在右邊的地圖中可以直接定位，同時(shí)點(diǎn)擊預(yù)警點(diǎn)，可以把相應(yīng)的主要信息以彈窗的形式展示出來。這里的主要邏輯就是通過ajax去后臺(tái)查詢臺(tái)網(wǎng)地震信息詳情。然后根據(jù)經(jīng)緯度綁定marker，同時(shí)將marker在地圖上進(jìn)行展示。
function preview(pkId){
$.ajax({
type:"post",
url:prefix + "/detail/" + pkId,
dataType:"json",
cache:false,
processData:false,
success:function(result){
if(result.code == web_status.SUCCESS){
var eqInfo = result.data;
var content = "<strong>發(fā)震時(shí)間:</strong>"+eqInfo.otime + "<br/><strong>震中位置:</strong>"+eqInfo.locationC;
content += "<br/><strong>震源深度（千米）:</strong>"+eqInfo.epiDepth + "<br/><strong>震級(jí):</strong>"+eqInfo.m;
var marker = L.marker([eqInfo.epiLat, eqInfo.epiLon],
{icon: L.icon.pulse({iconSize:[25,25],color:'#e50b3d',fillColor:"#e50b3d"})}).bindPopup(content).addTo(mymap);
showLayerGroup.clearLayers();
showLayerGroup.addLayer(marker);
mymap.setView(showLayerGroup.getBounds().getCenter(),8);//同時(shí)設(shè)置中心位置和級(jí)別
}
},
error:function(){
$.modal.alertWarning("獲取信息失敗");
}
});
}????????至此，前端的主要代碼也編寫完畢，最后我們將工程啟動(dòng)起來，然后進(jìn)行前后臺(tái)的聯(lián)調(diào)。?展示最終的效果。
三、效果展示
????????本小節(jié)主要展示基于SpringBoot和Leaflet的地震臺(tái)網(wǎng)信息預(yù)警可視化效果。從列表搜索到地圖定位，讓大家對(duì)開發(fā)出來的效果有一個(gè)直觀的感受。同時(shí)為了將大于（含）6級(jí)的地震信息進(jìn)行醒目的提示，在列表中我們對(duì)這些數(shù)據(jù)進(jìn)行標(biāo)紅。
默認(rèn)系統(tǒng)功能界面
????????默認(rèn)情況下，列表的搜索功能是關(guān)閉的，如果您在使用過程中需要進(jìn)行數(shù)據(jù)檢索，可以點(diǎn)擊搜索按鈕打開檢索欄。
系統(tǒng)檢索支持頁面
?????????在系統(tǒng)中，點(diǎn)擊操作按鈕欄中的定位功能。會(huì)自動(dòng)實(shí)現(xiàn)當(dāng)前地震信息在地圖上的定位。
地震地圖定位示意圖?
臺(tái)灣花蓮某地地震?
青島某地地震示意圖?
四川某地地震示意圖?文章來源：http://www.zghlxwxcb.cn/news/detail-860286.html
總結(jié)
????????以上就是本文的主要內(nèi)容，?本文即對(duì)采集回來的中國(guó)地震臺(tái)網(wǎng)數(shù)據(jù)進(jìn)行預(yù)警可視化進(jìn)行深入講解。首先講解后臺(tái)的代碼和功能設(shè)計(jì)，然后基于L.Icon.Pulse進(jìn)行地震預(yù)警展示，最后展示預(yù)警可視化效果。地址災(zāi)害不可預(yù)測(cè)，但是我們?cè)跒?zāi)后應(yīng)該快速提供應(yīng)急救援，將盡量減少人民群眾的生命財(cái)產(chǎn)損失。行文倉促，定有不足之處，不管是批評(píng)或者指導(dǎo)，不妨來博文中指導(dǎo)一二，不勝感激。文章來源地址http://www.zghlxwxcb.cn/news/detail-860286.html
到了這里，關(guān)于基于SpringBoot和Leaflet的地震臺(tái)網(wǎng)信息預(yù)警可視化的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
