目錄

前言

一、Java后臺開發(fā)設(shè)計(jì)與實(shí)現(xiàn)

1、模型層實(shí)現(xiàn)

2、控制層設(shè)計(jì)

二、WebGIS界面實(shí)現(xiàn)

1、列表界面的定義

2、全球基地可視化

三、成果展示

1、全球部署情況

2、亞太地區(qū)

3、歐洲基地分布

4、中東的部署

四、總結(jié)

---

前言

????????在之前的博客中，我們曾經(jīng)對漂亮國的基地信息進(jìn)行了采集，包括其國內(nèi)的基地和海外的基地。關(guān)注最近的世界新聞的朋友應(yīng)該注意到了，就是最近中東小霸王被周邊的國家群毆了。今天我們結(jié)合上次搜集的數(shù)據(jù)來對其全球的基地信息進(jìn)行空間可視化，看看它的空間部署方位圖。

? ? ? ? 本文以Java開發(fā)語言為例，使用SpringBoot框架來進(jìn)行后臺開發(fā)，詳細(xì)講解如何使用Leaflet對PostGIS的全球基地信息進(jìn)行Web可視化，最后分享Web可視化結(jié)果。從國內(nèi)基地，到海外不同國家的具體的駐扎分布。讓您對其在世界各地的分布有直觀的感受。通過本文，您可以學(xué)習(xí)如何使用Java來開發(fā)WebGIS系統(tǒng)，對于空間數(shù)據(jù)的可視化有了更深的掌握。

一、Java后臺開發(fā)設(shè)計(jì)與實(shí)現(xiàn)

????????作為標(biāo)準(zhǔn)的web程序，這里采用MVC的設(shè)計(jì)架構(gòu)，后臺采用Springboot來進(jìn)行開發(fā)。本節(jié)將從模型層、業(yè)務(wù)層、控制層三層的具體設(shè)計(jì)與實(shí)現(xiàn)來詳細(xì)講解。

1、模型層實(shí)現(xiàn)

????????模型層主要包含業(yè)務(wù)實(shí)體層和Mapper的數(shù)據(jù)庫操作層。其中模型層主要用來做數(shù)據(jù)庫和真實(shí)基地對象的關(guān)系映射，與數(shù)據(jù)庫表是逐一對應(yīng)的。Mapper是實(shí)現(xiàn)空間對象到數(shù)據(jù)庫對應(yīng)持久化的對象，來實(shí)現(xiàn)基地信息的查詢、新增、修改和刪除操作。

????????實(shí)體層對象的代碼如下：

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;@TableIdprivate 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層中，我們提供兩個(gè)方法，方法展示如下：

序號	方法名	說明
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è)計(jì)

????????控制層主要接收前端的請求，同時(shí)調(diào)用業(yè)務(wù)層的業(yè)務(wù)邏輯代碼，將前端傳入的參數(shù)再傳給業(yè)務(wù)層，實(shí)現(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);
}

????????剩下比較重要的就是定義控制層，除了之前提供的管理接口。這里我們重要介紹三個(gè)方法：

序號	方法名	說明
1	String map()	前端跳轉(zhuǎn)到地圖展示頁面
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);
}

????????以上就是后臺的設(shè)計(jì)及代碼的具體實(shí)現(xiàn)。下面再來進(jìn)行前端的WebGIS功能開發(fā)。

二、WebGIS界面實(shí)現(xiàn)

????????在WebGIS的頁面中，我們將展示界面分為兩個(gè)部分，左邊是全球的基地展示部分，右邊的地圖展示部分，左邊支持按照基地的中英文名稱進(jìn)行模糊檢索，結(jié)果以列表的形式展示；右邊是地圖展示界面，將全球的基地信息都顯示在一張圖上，同時(shí)在地圖上點(diǎn)擊一個(gè)標(biāo)記，可以把當(dāng)前基地的主要信息展示出來，比如基地的中英文名稱，駐扎所在國家的中英文名稱也同時(shí)展示出來。下面我們將代碼進(jìn)行詳細(xì)的說明。

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>&nbsp;搜索</a><a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</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)" onclick="preview(\'' + row.enName + '\',\''+row.id+'\')"><i class="fa fa-send-o"></i></a> ');return actions.join('');}}]};$.table.init(options);

2、全球基地可視化

????????在界面中初始化表格的基本信息之后，我們還要將其全球的基地信息全部查詢出來，然后在地圖上進(jìn)行展示。地圖的展示包括兩個(gè)部分，第一個(gè)部分是圖例的展示，包括國內(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進(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 + "<br/><strong>名稱（中）:</strong>"+dataInfo.cnName;content += "<br/><strong>駐地國家（英）:</strong>"+dataInfo.enCountry + "<br/><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, //橫坐標(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)將基地列表可視化以及全球基地的空間可視化。

三、成果展示

????????在后臺開發(fā)和前端web界面可視化都完成之后，下面我們來看一下實(shí)際的頁面效果。通過對結(jié)果的分析，可以看到其全球的基地分布情況。本節(jié)將從全球、亞太、歐洲、中東、本地四個(gè)角度來進(jìn)行說明。

1、全球部署情況

?????????從全球來看，漂亮國的基地在全球很多重點(diǎn)的地方都有部署。比如亞太的國家中，日本和韓國；歐洲的德國，意大利等等，同時(shí)在南美洲也有一些基地，其太平洋的基地許多都極負(fù)盛名，比如關(guān)島的基地。在重要巷道，比如馬六甲海峽的新加坡有駐軍，紅海口也有基地，波斯灣也是部署基地的重要位置。

2、亞太地區(qū)

????????二戰(zhàn)及朝鮮戰(zhàn)爭后，其在亞太地區(qū)有很多的軍事部署。比如在駐韓美軍和駐日美軍，這兩個(gè)國家有很多的基地。下面來詳細(xì)看一下：

????????這是駐韓美軍的分布，可以看到在很多密密麻麻的紅點(diǎn)，表明在韓國部署了大量的力量。?

????????與之對應(yīng)的還有日本，日本也是很多駐軍，其中包括美軍海外的唯一一個(gè)航母基地，橫須賀航母基地，還有若干的空軍基地。在沖繩地區(qū)，很小的地方就部署了若干的基地。

3、歐洲基地分布

????????美國的歐洲基地分布主要集中在德國、意大利和英國等，這些國家也是北約的主要成員國。

?????????在德國的基地分布主要是集中在原西德的地方，基地的分布是最多的。其在意大利的基地分布情況如下：

4、中東的部署

????????最后來看看它在中東的基地部署，眾所周知，中東這個(gè)地方是個(gè)火藥桶。中東小霸王曾經(jīng)一個(gè)人單挑中東多國，應(yīng)該說與漂亮國的護(hù)佑不無關(guān)系。

????????從地圖上看起來，它在周邊的軍事存在還好，主要還是靠小霸王的存在。 還是希望世界和平，沖突對老百姓影響太大了。

四、總結(jié)

????????以上就是本文的主要內(nèi)容，本文以Java開發(fā)語言為例，使用SpringBoot框架來進(jìn)行后臺開發(fā)，詳細(xì)講解如何使用Leaflet對PostGIS的全球基地信息進(jìn)行Web可視化，最后分享Web可視化結(jié)果。從國內(nèi)基地，到海外不同國家的具體的駐扎分布。讓您對其在世界各地的分布有直觀的感受。行文倉促，難免有不足之處，歡迎朋友們在評論區(qū)批評指正，不甚感謝。