基于SpringBoot和PostGIS的某國基地可視化實戰(zhàn)
前言
在之前的博客中，我們曾經(jīng)對漂亮國的基地信息進行了采集，包括其國內(nèi)的基地和海外的基地。關(guān)注最近的世界新聞的朋友應(yīng)該注意到了，就是最近中東小霸王被周邊的國家群毆了。今天我們結(jié)合上次搜集的數(shù)據(jù)來對其全球的基地信息進行空間可視化，看看它的空間部署方位圖。
本文以Java開發(fā)語言為例，使用SpringBoot框架來進行后臺開發(fā)，詳細講解如何使用Leaflet對PostGIS的全球基地信息進行Web可視化，最后分享Web可視化結(jié)果。從國內(nèi)基地，到海外不同國家的具體的駐扎分布。讓您對其在世界各地的分布有直觀的感受。通過本文，您可以學(xué)習(xí)如何使用Java來開發(fā)WebGIS系統(tǒng)，對于空間數(shù)據(jù)的可視化有了更深的掌握。
一、Java后臺開發(fā)設(shè)計與實現(xiàn)
作為標準的web程序，這里采用MVC的設(shè)計架構(gòu)，后臺采用Springboot來進行開發(fā)。本節(jié)將從模型層、業(yè)務(wù)層、控制層三層的具體設(shè)計與實現(xiàn)來詳細講解。
1、模型層實現(xiàn)
模型層主要包含業(yè)務(wù)實體層和Mapper的數(shù)據(jù)庫操作層。其中模型層主要用來做數(shù)據(jù)庫和真實基地對象的關(guān)系映射，與數(shù)據(jù)庫表是逐一對應(yīng)的。Mapper是實現(xiàn)空間對象到數(shù)據(jù)庫對應(yīng)持久化的對象，來實現(xiàn)基地信息的查詢、新增、修改和刪除操作。
實體層對象的代碼如下：
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;
/**
* 美軍軍事基地實體類
* @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 = "";//部署國家英文名
@TableField(value="cn_country")
private String cnCountry = "";//部署國家英文名
@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層中，我們提供兩個方法，方法展示如下：
| 序號 | 方法名 | 說明 |
| 1 | List<UsaMilitaryBase> findList() | 查詢美軍軍事基地列表 |
| 2 | UsaMilitaryBase findMilitaryBaseById(@Param("id") Long id) | 根據(jù)數(shù)據(jù)庫ID查詢基地詳情 |
Mapper對象的關(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ù)庫ID查詢基地詳情
* @param id
* @return id對應(yīng)的基地信息
*/
@Select(FIND_BYID)
UsaMilitaryBase findMilitaryBaseById(@Param("id") Long id);
}2、控制層設(shè)計
控制層主要接收前端的請求，同時調(diào)用業(yè)務(wù)層的業(yè)務(wù)邏輯代碼，將前端傳入的參數(shù)再傳給業(yè)務(wù)層，實現(xiàn)業(yè)務(wù)的處理，然后接收業(yè)務(wù)層返回的數(shù)據(jù)，再繼續(xù)返回給前端。由于這里的業(yè)務(wù)層沒有特別復(fù)雜的方法，這里僅將分頁查詢List的方法分享出來，其它方法都是簡單的單表操作。
@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);
}剩下比較重要的就是定義控制層，除了之前提供的管理接口。這里我們重要介紹三個方法：
| 序號 | 方法名 | 說明 |
| 1 | String map() | 前端跳轉(zhuǎn)到地圖展示頁面 |
| 2 | AjaxResult globalList() | 使用ajax獲取所有基地信息列表 |
| 3 | AjaxResult getInfo(@PathVariable("id") Long id) | 獲取單個基地信息接口 |
其關(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);
}以上就是后臺的設(shè)計及代碼的具體實現(xiàn)。下面再來進行前端的WebGIS功能開發(fā)。
二、WebGIS界面實現(xiàn)
在WebGIS的頁面中，我們將展示界面分為兩個部分，左邊是全球的基地展示部分，右邊的地圖展示部分，左邊支持按照基地的中英文名稱進行模糊檢索，結(jié)果以列表的形式展示；右邊是地圖展示界面，將全球的基地信息都顯示在一張圖上，同時在地圖上點擊一個標記，可以把當(dāng)前基地的主要信息展示出來，比如基地的中英文名稱，駐扎所在國家的中英文名稱也同時展示出來。下面我們將代碼進行詳細的說明。
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元素中，詳細的代碼如下所示：
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、全球基地可視化
在界面中初始化表格的基本信息之后，我們還要將其全球的基地信息全部查詢出來，然后在地圖上進行展示。地圖的展示包括兩個部分，第一個部分是圖例的展示，包括國內(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);
}將圖例信息定義好之后，再請求后端的獲取所有信息接口，將所有的基地信息查詢出來，然后在使用Leaflet進行空間展示，關(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>駐地國家（英）:</strong>"+dataInfo.enCountry + "
<strong>駐地國家（英）:</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, //橫坐標偏移(像素)
offsetY: 30, //縱坐標偏移(像素)
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進行WebGIS開發(fā)的關(guān)鍵代碼，實現(xiàn)將基地列表可視化以及全球基地的空間可視化。
三、成果展示
在后臺開發(fā)和前端web界面可視化都完成之后，下面我們來看一下實際的頁面效果。通過對結(jié)果的分析，可以看到其全球的基地分布情況。本節(jié)將從全球、亞太、歐洲、中東、本地四個角度來進行說明。
1、全球部署情況
從全球來看，漂亮國的基地在全球很多重點的地方都有部署。比如亞太的國家中，日本和韓國；歐洲的德國，意大利等等，同時在南美洲也有一些基地，其太平洋的基地許多都極負盛名，比如關(guān)島的基地。在重要巷道，比如馬六甲海峽的新加坡有駐軍，紅海口也有基地，波斯灣也是部署基地的重要位置。
2、亞太地區(qū)
二戰(zhàn)及朝鮮戰(zhàn)爭后，其在亞太地區(qū)有很多的軍事部署。比如在駐韓美軍和駐日美軍，這兩個國家有很多的基地。下面來詳細看一下：
這是駐韓美軍的分布，可以看到在很多密密麻麻的紅點，表明在韓國部署了大量的力量。
與之對應(yīng)的還有日本，日本也是很多駐軍，其中包括美軍海外的唯一一個航母基地，橫須賀航母基地，還有若干的空軍基地。在沖繩地區(qū)，很小的地方就部署了若干的基地。
3、歐洲基地分布
美國的歐洲基地分布主要集中在德國、意大利和英國等，這些國家也是北約的主要成員國。
在德國的基地分布主要是集中在原西德的地方，基地的分布是最多的。其在意大利的基地分布情況如下：
4、中東的部署
最后來看看它在中東的基地部署，眾所周知，中東這個地方是個火藥桶。中東小霸王曾經(jīng)一個人單挑中東多國，應(yīng)該說與漂亮國的護佑不無關(guān)系。
從地圖上看起來，它在周邊的軍事存在還好，主要還是靠小霸王的存在。 還是希望世界和平，沖突對老百姓影響太大了。
四、總結(jié)
以上就是本文的主要內(nèi)容，本文以Java開發(fā)語言為例，使用SpringBoot框架來進行后臺開發(fā)，詳細講解如何使用Leaflet對PostGIS的全球基地信息進行Web可視化，最后分享Web可視化結(jié)果。從國內(nèi)基地，到海外不同國家的具體的駐扎分布。讓您對其在世界各地的分布有直觀的感受。行文倉促，難免有不足之處，歡迎朋友們在評論區(qū)批評指正，不甚感謝。
到此這篇關(guān)于基于SpringBoot和PostGIS的某國基地可視化實戰(zhàn)的文章就介紹到這了,更多相關(guān)SpringBoot和PostGIS可視化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- springboot集成druid,多數(shù)據(jù)源可視化,p6spy問題
- 基于springboot實現(xiàn)數(shù)據(jù)可視化的示例代碼
- SpringBoot+Thymeleaf+ECharts實現(xiàn)大數(shù)據(jù)可視化(基礎(chǔ)篇)
- SpringBoot+thymeleaf+Echarts+Mysql 實現(xiàn)數(shù)據(jù)可視化讀取的示例
- SpringBoot Admin 如何實現(xiàn)Actuator端點可視化監(jiān)控
- SpringBoot可視化接口開發(fā)工具magic-api的簡單使用教程
- SpringBoot+ECharts是如何實現(xiàn)數(shù)據(jù)可視化的
- Springboot添加jvm監(jiān)控實現(xiàn)數(shù)據(jù)可視化
相關(guān)文章
大家好，本篇文章主要講的是springboot中如何使用minio存儲容器，感興趣的同學(xué)趕快來看一看吧，對你有幫助的話記得收藏一下2022-02-02
今天小編就為大家分享一篇關(guān)于Java源碼解析HashMap成員變量，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
本文主要介紹了EasyCode整合mybatis-plus的配置詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
剛學(xué)完javaweb,對自己的Dao層代碼很不滿意的話,可得來學(xué)學(xué)MyBatis.學(xué)習(xí)MyBatis既可以改進JDBC的使用,實現(xiàn)Dao層也會變得很簡便,下面我將介紹IDEA中maven配置MyBatis簡單流程,需要的朋友可以參考下2021-06-06
springboot使用自定義注解實現(xiàn)aop切面日志
這篇文章主要為大家詳細介紹了springboot使用自定義注解實現(xiàn)aop切面日志，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-09-09
這篇文章主要為大家詳細介紹了springMVC實現(xiàn)文件上傳和下載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了SpringBoot 編寫配置文件的兩種方法，幫助大家更好的理解和使用springboot框架，感興趣的朋友可以了解下2020-11-11
Javaweb-HttpServletResponse的sendRedirectch重定向方式
這篇文章主要介紹了Javaweb-HttpServletResponse的sendRedirectch重定向方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09
No ‘Access-Control-Allow-Origin‘ header is&nb
這篇文章主要介紹了No ‘Access-Control-Allow-Origin‘ header is present跨域及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
Netty分布式NioEventLoop優(yōu)化selector源碼解析
這篇文章主要介紹了Netty分布式NioEventLoop優(yōu)化selector源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-03-03