基于SpringBoot和PostGIS的某國(guó)基地可視化實(shí)戰(zhàn)
前言
在之前的博客中，我們?cè)?jīng)對(duì)漂亮國(guó)的基地信息進(jìn)行了采集，包括其國(guó)內(nèi)的基地和海外的基地。關(guān)注最近的世界新聞的朋友應(yīng)該注意到了，就是最近中東小霸王被周邊的國(guó)家群毆了。今天我們結(jié)合上次搜集的數(shù)據(jù)來(lái)對(duì)其全球的基地信息進(jìn)行空間可視化，看看它的空間部署方位圖。
本文以Java開發(fā)語(yǔ)言為例，使用SpringBoot框架來(lái)進(jìn)行后臺(tái)開發(fā)，詳細(xì)講解如何使用Leaflet對(duì)PostGIS的全球基地信息進(jìn)行Web可視化，最后分享Web可視化結(jié)果。從國(guó)內(nèi)基地，到海外不同國(guó)家的具體的駐扎分布。讓您對(duì)其在世界各地的分布有直觀的感受。通過本文，您可以學(xué)習(xí)如何使用Java來(lái)開發(fā)WebGIS系統(tǒng)，對(duì)于空間數(shù)據(jù)的可視化有了更深的掌握。
一、Java后臺(tái)開發(fā)設(shè)計(jì)與實(shí)現(xiàn)
作為標(biāo)準(zhǔn)的web程序，這里采用MVC的設(shè)計(jì)架構(gòu)，后臺(tái)采用Springboot來(lái)進(jìn)行開發(fā)。本節(jié)將從模型層、業(yè)務(wù)層、控制層三層的具體設(shè)計(jì)與實(shí)現(xiàn)來(lái)詳細(xì)講解。
1、模型層實(shí)現(xiàn)
模型層主要包含業(yè)務(wù)實(shí)體層和Mapper的數(shù)據(jù)庫(kù)操作層。其中模型層主要用來(lái)做數(shù)據(jù)庫(kù)和真實(shí)基地對(duì)象的關(guān)系映射，與數(shù)據(jù)庫(kù)表是逐一對(duì)應(yīng)的。Mapper是實(shí)現(xiàn)空間對(duì)象到數(shù)據(jù)庫(kù)對(duì)應(yīng)持久化的對(duì)象，來(lái)實(shí)現(xiàn)基地信息的查詢、新增、修改和刪除操作。
實(shí)體層對(duì)象的代碼如下：
package com.yelang.project.extend.militarytopics.domain;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.yelang.framework.handler.PgGeometryTypeHandler;
import com.yelang.framework.web.domain.BaseEntity;
import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;
import lombok.ToString;
/**
* 美軍軍事基地實(shí)體類
* @author 夜郎king
*/
@TableName(value ="biz_usa_military_base",autoResultMap = true)
@NoArgsConstructor
@AllArgsConstructor
@Setter
@Getter
@ToString
public class UsaMilitaryBase extends BaseEntity{
private static final long serialVersionUID = 9052078556566456025L;
@TableId
private Long id;//主鍵
@TableField(value = "en_name")
private String enName;
@TableField(value = "en_desc")
private String enDesc;
@TableField(value = "cn_name")
private String cnName = "";
private String remark;
private Integer type;//基地類型，1海外 0 本土
@TableField(value="en_country")
private String enCountry = "";//部署國(guó)家英文名
@TableField(value="cn_country")
private String cnCountry = "";//部署國(guó)家英文名
@TableField(value="en_city")
private String enCity = "";//部署城市英文名
@TableField(value="cn_city")
private String cnCity = "";//部署城市中文名
@TableField(typeHandler = PgGeometryTypeHandler.class)
private String geom;
@TableField(exist=false)
private String geomJson;
}其次，在Mapper層中，我們提供兩個(gè)方法，方法展示如下：
| 序號(hào) | 方法名 | 說(shuō)明 |
| 1 | List<UsaMilitaryBase> findList() | 查詢美軍軍事基地列表 |
| 2 | UsaMilitaryBase findMilitaryBaseById(@Param("id") Long id) | 根據(jù)數(shù)據(jù)庫(kù)ID查詢基地詳情 |
Mapper對(duì)象的關(guān)鍵代碼如下：
package com.yelang.project.extend.militarytopics.mapper;
import java.util.List;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.yelang.project.extend.militarytopics.domain.UsaMilitaryBase;
public interface UsaMilitaryBaseMapper extends BaseMapper<UsaMilitaryBase>{
static final String FIND_LIST= "<script>"
+ " select t.*,st_asgeojson(t.geom) as geomJson from biz_usa_military_base t order by create_time desc,en_name "
+ "</script>";
/**
* 查詢美軍軍事基地列表
* @return 返回美軍全球軍事基地列表
*/
@Select(FIND_LIST)
List<UsaMilitaryBase> findList();
static final String FIND_BYID= "<script>"
+ " select t.*,st_asgeojson(t.geom) as geomJson from biz_usa_military_base t where t.id = #{id} "
+ "</script>";
/**
* 根據(jù)數(shù)據(jù)庫(kù)ID查詢基地詳情
* @param id
* @return id對(duì)應(yīng)的基地信息
*/
@Select(FIND_BYID)
UsaMilitaryBase findMilitaryBaseById(@Param("id") Long id);
}2、控制層設(shè)計(jì)
控制層主要接收前端的請(qǐng)求，同時(shí)調(diào)用業(yè)務(wù)層的業(yè)務(wù)邏輯代碼，將前端傳入的參數(shù)再傳給業(yè)務(wù)層，實(shí)現(xiàn)業(yè)務(wù)的處理，然后接收業(yè)務(wù)層返回的數(shù)據(jù)，再繼續(xù)返回給前端。由于這里的業(yè)務(wù)層沒有特別復(fù)雜的方法，這里僅將分頁(yè)查詢List的方法分享出來(lái)，其它方法都是簡(jiǎn)單的單表操作。
@Override
public List<UsaMilitaryBase> selectList(UsaMilitaryBase entity) {
QueryWrapper<UsaMilitaryBase> queryWrapper = new QueryWrapper<UsaMilitaryBase>();
if (StringUtils.isNotBlank(entity.getEnName())) {
queryWrapper.like("en_name", entity.getEnName());
}
if (StringUtils.isNotBlank(entity.getCnName())) {
queryWrapper.like("cn_name", entity.getCnName());
}
queryWrapper.orderByDesc("create_time");
queryWrapper.orderByAsc("en_name");
return this.baseMapper.selectList(queryWrapper);
}剩下比較重要的就是定義控制層，除了之前提供的管理接口。這里我們重要介紹三個(gè)方法：
| 序號(hào) | 方法名 | 說(shuō)明 |
| 1 | String map() | 前端跳轉(zhuǎn)到地圖展示頁(yè)面 |
| 2 | AjaxResult globalList() | 使用ajax獲取所有基地信息列表 |
| 3 | AjaxResult getInfo(@PathVariable("id") Long id) | 獲取單個(gè)基地信息接口 |
其關(guān)鍵方法如下：
@RequiresPermissions("mt:usabase:map")
@GetMapping("/map")
public String map(){
return prefix + "/map";
}
@RequiresPermissions("mt:usabase:globallist")
@GetMapping("/globallist")
@ResponseBody
public AjaxResult globalList(){
List<UsaMilitaryBase> list = mbaseService.findList();
AjaxResult ar = AjaxResult.success();
ar.put("data", list);
return ar;
}
@GetMapping("/info/{id}")
@ResponseBody
public AjaxResult getInfo(@PathVariable("id") Long id){
UsaMilitaryBase province = mbaseService.findMilitaryBaseById(id);
return AjaxResult.success().put("data", province);
}以上就是后臺(tái)的設(shè)計(jì)及代碼的具體實(shí)現(xiàn)。下面再來(lái)進(jìn)行前端的WebGIS功能開發(fā)。
二、WebGIS界面實(shí)現(xiàn)
在WebGIS的頁(yè)面中，我們將展示界面分為兩個(gè)部分，左邊是全球的基地展示部分，右邊的地圖展示部分，左邊支持按照基地的中英文名稱進(jìn)行模糊檢索，結(jié)果以列表的形式展示；右邊是地圖展示界面，將全球的基地信息都顯示在一張圖上，同時(shí)在地圖上點(diǎn)擊一個(gè)標(biāo)記，可以把當(dāng)前基地的主要信息展示出來(lái)，比如基地的中英文名稱，駐扎所在國(guó)家的中英文名稱也同時(shí)展示出來(lái)。下面我們將代碼進(jìn)行詳細(xì)的說(shuō)明。
1、列表界面的定義
列表的展示需要綁定到前端組件中，定義的關(guān)鍵代碼如下：
<div class="col-sm-3">
<div class="col-sm-12 search-collapse" style="display: none;">
<form id="formId">
<div class="select-list">
<ul>
<li>
基地名(英)：<input type="text" name="enName"/>
</li>
<li>
基地名(中)：<input type="text" name="cnName"/>
</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>然后我們通過javascript將數(shù)據(jù)掛載到div元素中，詳細(xì)的代碼如下所示：
ar options = {
url: prefix + "/list",
modalName: "美軍全球軍事基地",
columns: [
{
field: 'id',
title: '',
visible: false
},
{
field: 'enName',
title: '基地名稱',
formatter: function(value, row, index) {
//return row.code + "/"+ row.name;
return row.enName;
}
},
{
title: '操作',
align: 'center',
formatter: function(value, row, index) {
var actions = [];
actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" rel="external nofollow" onclick="preview(\'' + row.enName + '\',\''+row.id+'\')"><i class="fa fa-send-o"></i></a> ');
return actions.join('');
}
}]
};
$.table.init(options);2、全球基地可視化
在界面中初始化表格的基本信息之后，我們還要將其全球的基地信息全部查詢出來(lái)，然后在地圖上進(jìn)行展示。地圖的展示包括兩個(gè)部分，第一個(gè)部分是圖例的展示，包括國(guó)內(nèi)和海外基地兩種類型。具體圖例的展示如下：
function initLegend(){
const legend = L.control.Legend({
position: "bottomright",
collapsed: false,
symbolWidth: 35,
opacity: 1,
title:"圖例",
column: 2,
legends: [ {
label: "海外",
type: "circle",
radius: 12,
color: "#c50808",
fillColor: "#c50808",
fillOpacity: 0.6,
weight: 2
}, {
label: "本土",
type: "circle",
radius: 10,
color: "#168d40",
fillColor: "#168d40",
fillOpacity: 0.6,
weight: 2
}]
}).addTo(mymap);
}將圖例信息定義好之后，再請(qǐng)求后端的獲取所有信息接口，將所有的基地信息查詢出來(lái)，然后在使用Leaflet進(jìn)行空間展示，關(guān)鍵代碼如下：
function showMilitary(){
$.ajax({
type:"get",
url:prefix + "/globallist",
dataType:"json",
cache:false,
processData:false,
success:function(result){
if(result.code == web_status.SUCCESS){
var strokeStyleSet = "#c50808";
var lat,lng,cityInfo;
for(var i=0;i<result.data.length;i++){
var dataInfo = result.data[i];
var geomObj = JSON.parse(dataInfo.geomJson);
var radiusSize = 6;
switch(dataInfo.type) {
case 0:
strokeStyleSet = "#168d40";
break;
default:
strokeStyleSet = "#c50808";
}
var content = "<strong>名稱（英）:</strong>"+dataInfo.enName + "
<strong>名稱（中）:</strong>"+dataInfo.cnName;
content += "
<strong>駐地國(guó)家（英）:</strong>"+dataInfo.enCountry + "
<strong>駐地國(guó)家（英）:</strong>"+dataInfo.cnCountry;
var latlng = new L.latLng(geomObj.coordinates[1], geomObj.coordinates[0]);
let marker = L.circleMarker(latlng, {
radius: radiusSize,
color: strokeStyleSet,//這里設(shè)置的是circleMarker的顏色屬性
labelStyle: {
offsetX: 0, //橫坐標(biāo)偏移(像素)
offsetY: 30, //縱坐標(biāo)偏移(像素)
text: dataInfo.cnName != '' ? dataInfo.cnName : dataInfo.enName,
rotation: 0,
zIndex: radiusSize,
minZoom : 2,
fillStyle: strokeStyleSet
}
}).addTo(showLayerGroup);
marker.bindPopup(content);
}
mymap.addLayer(showLayerGroup);
}
},
error:function(){
$.modal.alertWarning("獲取信息失敗");
}
});
}以上就是使用Leaflet進(jìn)行WebGIS開發(fā)的關(guān)鍵代碼，實(shí)現(xiàn)將基地列表可視化以及全球基地的空間可視化。
三、成果展示
在后臺(tái)開發(fā)和前端web界面可視化都完成之后，下面我們來(lái)看一下實(shí)際的頁(yè)面效果。通過對(duì)結(jié)果的分析，可以看到其全球的基地分布情況。本節(jié)將從全球、亞太、歐洲、中東、本地四個(gè)角度來(lái)進(jìn)行說(shuō)明。
1、全球部署情況
從全球來(lái)看，漂亮國(guó)的基地在全球很多重點(diǎn)的地方都有部署。比如亞太的國(guó)家中，日本和韓國(guó)；歐洲的德國(guó)，意大利等等，同時(shí)在南美洲也有一些基地，其太平洋的基地許多都極負(fù)盛名，比如關(guān)島的基地。在重要巷道，比如馬六甲海峽的新加坡有駐軍，紅?？谝灿谢?，波斯灣也是部署基地的重要位置。
2、亞太地區(qū)
二戰(zhàn)及朝鮮戰(zhàn)爭(zhēng)后，其在亞太地區(qū)有很多的軍事部署。比如在駐韓美軍和駐日美軍，這兩個(gè)國(guó)家有很多的基地。下面來(lái)詳細(xì)看一下：
這是駐韓美軍的分布，可以看到在很多密密麻麻的紅點(diǎn)，表明在韓國(guó)部署了大量的力量。
與之對(duì)應(yīng)的還有日本，日本也是很多駐軍，其中包括美軍海外的唯一一個(gè)航母基地，橫須賀航母基地，還有若干的空軍基地。在沖繩地區(qū)，很小的地方就部署了若干的基地。
3、歐洲基地分布
美國(guó)的歐洲基地分布主要集中在德國(guó)、意大利和英國(guó)等，這些國(guó)家也是北約的主要成員國(guó)。
在德國(guó)的基地分布主要是集中在原西德的地方，基地的分布是最多的。其在意大利的基地分布情況如下：
4、中東的部署
最后來(lái)看看它在中東的基地部署，眾所周知，中東這個(gè)地方是個(gè)火藥桶。中東小霸王曾經(jīng)一個(gè)人單挑中東多國(guó)，應(yīng)該說(shuō)與漂亮國(guó)的護(hù)佑不無(wú)關(guān)系。
從地圖上看起來(lái)，它在周邊的軍事存在還好，主要還是靠小霸王的存在。 還是希望世界和平，沖突對(duì)老百姓影響太大了。
四、總結(jié)
以上就是本文的主要內(nèi)容，本文以Java開發(fā)語(yǔ)言為例，使用SpringBoot框架來(lái)進(jìn)行后臺(tái)開發(fā)，詳細(xì)講解如何使用Leaflet對(duì)PostGIS的全球基地信息進(jìn)行Web可視化，最后分享Web可視化結(jié)果。從國(guó)內(nèi)基地，到海外不同國(guó)家的具體的駐扎分布。讓您對(duì)其在世界各地的分布有直觀的感受。行文倉(cāng)促，難免有不足之處，歡迎朋友們?cè)谠u(píng)論區(qū)批評(píng)指正，不甚感謝。
到此這篇關(guān)于基于SpringBoot和PostGIS的某國(guó)基地可視化實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)SpringBoot和PostGIS可視化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- springboot集成druid,多數(shù)據(jù)源可視化,p6spy問題
- 基于springboot實(shí)現(xiàn)數(shù)據(jù)可視化的示例代碼
- SpringBoot+Thymeleaf+ECharts實(shí)現(xiàn)大數(shù)據(jù)可視化(基礎(chǔ)篇)
- SpringBoot+thymeleaf+Echarts+Mysql 實(shí)現(xiàn)數(shù)據(jù)可視化讀取的示例
- SpringBoot Admin 如何實(shí)現(xiàn)Actuator端點(diǎn)可視化監(jiān)控
- SpringBoot可視化接口開發(fā)工具magic-api的簡(jiǎn)單使用教程
- SpringBoot+ECharts是如何實(shí)現(xiàn)數(shù)據(jù)可視化的
- Springboot添加jvm監(jiān)控實(shí)現(xiàn)數(shù)據(jù)可視化
相關(guān)文章
大家好，本篇文章主要講的是springboot中如何使用minio存儲(chǔ)容器，感興趣的同學(xué)趕快來(lái)看一看吧，對(duì)你有幫助的話記得收藏一下2022-02-02
今天小編就為大家分享一篇關(guān)于Java源碼解析HashMap成員變量，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧2019-01-01
本文主要介紹了EasyCode整合mybatis-plus的配置詳解,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
剛學(xué)完javaweb,對(duì)自己的Dao層代碼很不滿意的話,可得來(lái)學(xué)學(xué)MyBatis.學(xué)習(xí)MyBatis既可以改進(jìn)JDBC的使用,實(shí)現(xiàn)Dao層也會(huì)變得很簡(jiǎn)便,下面我將介紹IDEA中maven配置MyBatis簡(jiǎn)單流程,需要的朋友可以參考下2021-06-06
springboot使用自定義注解實(shí)現(xiàn)aop切面日志
這篇文章主要為大家詳細(xì)介紹了springboot使用自定義注解實(shí)現(xiàn)aop切面日志，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細(xì)介紹了springMVC實(shí)現(xiàn)文件上傳和下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了SpringBoot 編寫配置文件的兩種方法，幫助大家更好的理解和使用springboot框架，感興趣的朋友可以了解下2020-11-11
Javaweb-HttpServletResponse的sendRedirectch重定向方式
這篇文章主要介紹了Javaweb-HttpServletResponse的sendRedirectch重定向方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
No ‘Access-Control-Allow-Origin‘ header is&nb
這篇文章主要介紹了No ‘Access-Control-Allow-Origin‘ header is present跨域及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Netty分布式NioEventLoop優(yōu)化selector源碼解析
這篇文章主要介紹了Netty分布式NioEventLoop優(yōu)化selector源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-03-03