当前位置： 首页 > ops >正文

基于SpringBoot和Leaflet的区域冲突可视化-以伊以冲突为例

ops 2025/6/27 15:41:58

目录

前言

一、相关空间要素

1、区域冲突目标查询

2、域外第三国势力查询

二、前后端应用实现

1、后台查询实现

2、前端Leaflet可视化

三、成果分析

1、冲突双方

2、域外势力

四、总结

前言

        在当今全球化时代，地区局势成为国际社会关注的焦点。其中，以色列与伊朗之间的冲突持续多年，局势复杂且影响深远。这种冲突不仅关乎两国人民的安危，还对地区稳定、国际能源、政治格局等诸多方面产生剧烈冲击。如何能直观、高效地呈现伊以冲突的态势，为冲突分析、预防及应对提供有力支持，是一个亟待解决的问题。传统上，冲突信息主要以文字报道、统计图表等形式传播。然而，这些方式在展现冲突的地理分布、动态变化等方面存在诸多局限。比如，文字描述难以让人清晰把握冲突发生的准确位置及其周边环境；统计图表虽能呈现数据，但缺乏地理空间上的直观关联。因此，构建一个可视化系统来呈现区域冲突，显得尤为关键。

        在众多可视化技术中，SpringBoot 与 Leaflet 的组合展现出独特优势。SpringBoot 是 Java 领域的开源框架，它简化了基于 Spring 应用的初始搭建以及开发过程，能快速搭建稳定、高效的后端服务。其内置的 Tomcat 容器，方便项目部署，强大的依赖管理机制使得开发者能专注于业务逻辑实现，为处理冲突数据的存储、分析及传输提供了坚实基础。Leaflet 则是轻量级的 JavaScript 地图库，它具有出色的跨浏览器兼容性，能实现流畅的地图交互。Leaflet 支持多种地图图层，可轻松加载地理数据，如矢量数据、栅格瓦片等，通过简单的 API 就能实现地图的缩放、平移、标记等功能，为在地图上精准展示冲突事件创造了有利条件。

        本研究旨在通过整合 SpringBoot 与 Leaflet 技术，以伊以冲突为典型案例，构建一个可视化系统。这不仅能为研究人员、政策制定者等提供直观的态势图，还能为后续深入分析成因、发展规律及影响提供可视化支撑，助力寻找和平解决的可能途径。接下来，本文将详细介绍系统的架构设计、数据处理流程、可视化实现等内容，以展现这一创新解决方案在区域冲突可视化领域的应用潜力。

一、相关空间要素

        本节将重点讲解如何使用PostGIS来进行相关信息的查询，比如涉及的双方以及主要城市信息，在之前的内容中，我们仅使用大概的中心位置来进行标注，而在大多情况下是需要使用首都等主要城市作为关键位置标记的。同时在展示的同事需要同时展示第三方的势力。本节将从以下两个方面来进行说明，首先介绍如何对区域冲突的目标及其主要城市进行空间查询，接着介绍如何介绍域外第三国的实例覆盖。

1、区域冲突目标查询

        首先需要对涉及的冲突目标进行查询，同时为了在地图上准确的使用首都位置进行标注，因此还需要将对应的首都信息进行标注。这里需要使用的有三张表，分别是全球主要城市信息表，国家首都信息关系表，国家信息表。查询国家信息及其对应的首都城市信息的sql如下：

-- 查询伊朗、以色列的国家及首都信息
select p.name,p.name_zh nameZh,p.latitude lat ,p.longitude lon,p.max_perkm maxPerkm
,wc.full_chinese_name fullChineseName,wc.short_english_name shortEnglishName
from biz_ne_10m_populated_places p,biz_country_capital ca,biz_world_country wc
where ca.country_id = wc.pk_id
and ca.places_id = p.pk_id
and wc.short_chinese_name in ('以色列','伊朗');

        在Navicat中执行上述的sql语句后，可以在客户端中看到以下结果：

name	namezh	lat	lon	maxperkm	fullchinesename	shortenglishname
Tehran	德黑兰	35.673889	51.422398	245	伊朗伊斯兰共和国	Iran
Tel Aviv	特拉维夫	32.081937	34.768066	386	以色列	Israel

2、域外第三国势力查询

        同样，为了在可视化的时候展示域外第三国的势力，以伊朗为例，我们来查询距离伊朗最近的10个域外基地信息。因此，这里必须会使用到的数据库表有国家信息表、第三方基地信息表。在查询域外第三国势力的时候，最核心的就是对距离进行求解，这里完全使用PostGIS的空间距离函数进行查询。查询SQL语句如下：

-- 查询距离伊朗最近的美国基地
select usa.en_name enName,usa.cn_name cnName,st_x(usa.geom) lat,st_y(usa.geom) lon,
st_distance(usa.geom :: geography, polygons.geom :: geography) / 1000.0 distance
from 
biz_usa_military_base as usa,
(select geom from biz_world_country t where t.short_chinese_name = '伊朗') polygons
order by
usa.geom <-> polygons.geom
limit 20;

        同样在Navicat中查看一下SQL语句执行的结果，查询结果如下所示：

enname	cnname	lat	lon	distance
NSA Bahrain (Fujairah Aviation Unit)		56.34	25.13	121.21369354597
NSA Bahrain (Aviation Unit Muharraq)		50.6475055555555	26.2670055555556	192.26232592418
Seeb MPT	阿曼SEEB MPT空军基地	58.19	23.67	208.86581048105
NSA Bahrain (Dependent School)		50.5554819801999	26.0905320697823	213.86842170652
NSA Bahrain (Banz Wrhs Compound)		50.5585290188209	26.0729379111567	215.5180516366
NSA Bahrain (Mina Sulman Pier Area)		50.5574665383606	25.9230863441519	230.79819439464998
NSA Bahrain	美国海军支援基地	50.7552382784088	25.6638820082909	251.39996333488
Al Udeid AB	乌迪德空军基地	51.3064722222222	25.1158805555556	265.64442185614
Ascension Auxiliary Airfield		42.9944844220603	42.2067069497732	302.35311786157996
Batman Air Base	土耳其蝙蝠洞空军基地	41.13	37.89	273.45916025612996
Masirah Island MPT		56.1730382293763	18.3259557344064	825.29732910215
Yumurtalik Petroleum Prod Storage Annex		35.78	36.77	759.58853505713
Incirlik Air Base Adana	因吉利克空军基地	35.4184	37.0059916666667	786.30702616774
Thumrait MPT	Thumrait机场	54.09	17.02	983.67664579451
Ankara Administration Office		32.85	39.93	962.3276559015101
Cigli Air Base	奇利空军基地	31.0744466800805	37.0503018108652	1163.80933528397
NAVMEDRSCHU Three Cairo Egypt		31.25	30.06	1404.82435410338
Mus Air Base		29.2642857142857	37.4865995975855	1306.09482339896
Izmir Storage Annex No 2		27.15	38.43	1467.3545099223
Izmir Air Station	伊兹密尔空军基地	27.15	38.43	1467.3545099223

        以上就是两个最重要的空间要素及使用PostGIS来进行相关查询的实例。通过这两个实例基本满足我们的查询需要。 

二、前后端应用实现

        经过前面的空间要的查询实现，下面就可以基于上面的结果来进行前后端应用的开发与实现。这种主要分后台的查询实现和前端Leaflet的可视化实现。通过本节，相信大家对如何进行空间开发有一定简单的认识。

1、后台查询实现

        后端的实现比较简单，这里重点介绍一下在PostGIS中进行空间位置的距离计算时，使用了一个近邻函数，因此在这里重点介绍，其它的方法都比较简单，不再进行赘述。

static final String FIND_MILITARYBASE= "<script>"+ " select usa.en_name enName,usa.cn_name cnName,st_x(usa.geom) lon,st_y(usa.geom) lat, "+ " st_distance(usa.geom :: geography, polygons.geom :: geography) / 1000.0 distance "+ " from biz_usa_military_base as usa, "+ " (select geom from biz_world_country t where t.short_chinese_name = #{short_chinese_name} ) polygons "+ " <![CDATA[ order by usa.geom <-> polygons.geom ]]> "+ " limit #{limitNum} "+ "</script>";
/**
* -查询距离最近的limitNum基地列表
* @param 国家名称
* @return 对应的基地信息列表
*/
@Select(FIND_MILITARYBASE)
List<UsamilitaryBaseDistanceVO> findMilitaryBase(@Param("short_chinese_name") String short_chinese_name,@Param("limitNum")Integer limitNum);

        在上面的例子中，眼尖的朋友一定发现了，在上面的sql语句编写中，我们加上了特殊符号处理，<->，如果在SQL中进行转义或设置，在执行SQL语句时就一定会出错的，因此十分要注意。除了在空间SQL查询中需要注意以上特殊处理外，剩下就是在查询国家时及其首都信息时，我们需要使用in查询函数，在MybatisPlus中使用自定义sql的方式如何执行呢？这里也给出具体的修改方法，如下所示：

final static String FIND_COUNTRY = "<script>"+ " select p.name,p.name_zh nameZh,p.latitude lat ,p.longitude lon,p.max_perkm maxPerkm " + " ,wc.full_chinese_name fullChineseName,wc.short_english_name shortEnglishName,st_asgeojson(wc.geom) geomJson "+ " from biz_ne_10m_populated_places p,biz_country_capital ca,biz_world_country wc "+ " where ca.country_id = wc.pk_id and ca.places_id = p.pk_id "+ " and wc.short_chinese_name in "+ " <foreach item='id' collection='short_chinese_names' open='(' separator=',' close=')'>" +  " #{id} "+ "</foreach>" + "</script>";/**
* - 根据国家中文简称查询国家信息列表
* @return
*/
@Select(FIND_COUNTRY)
List<CountryCapitalVO> findCountryList(@Param("short_chinese_names") List<String> short_chinese_names);

        请注意在上面的实例中，在@Select子句中，我们嵌入了一个foreach,通过这个foreach能接受外部的参数，这样就能实现动态in查询了。这是数据访问层mapper的重点函数，接下来看一下实际的调用方法，代码如下：

@RequiresPermissions("eq:iranisraelconflict:list")
@GetMapping("/iranisraelconflict/list")
@ResponseBody
public AjaxResult iranisraelconflictData(){List<String> short_chinese_names = new ArrayList<String>();short_chinese_names.add("以色列");short_chinese_names.add("伊朗");List<CountryCapitalVO> countries = wCountryService.findCountryList(short_chinese_names);List<UsamilitaryBaseDistanceVO> militaries = usaMilitaryBaseService.findMilitaryBase("伊朗", 10);//一次性返回return AjaxResult.success().put("data", countries).put("militaries", militaries);
}

2、前端Leaflet可视化

有了后端的相关服务之后，接下来就可以基于Leaflet来构建前端交互界面，这里除了将冲突目标及其域外国家的点位和位置展示。这里在进行空间展示时，需要考虑重叠的关系，因此在展示的时候一定要主要进行避让的设置。设置的方法如下：

        首先要引入相关的组件和依赖，方法如下：

<!-- 引入rbush.js -->
<script th:src="@{/js/plugins/rbush/rbush.js}"></script>
<!-- 引入Leaflet.LayerGroup.Collision.js -->
<script th:src="@{/js/plugins/layergroup-collision/Leaflet.LayerGroup.Collision.js}"></script>

        然后在页面中对相关的空间实体元素进行空间可视化，关键方法如下：

 

function showConflict(){$.ajax({  type:"get",  url:prefix + "/iranisraelconflict/list",  data:{},  dataType:"json",  cache:false,processData:false,success:function(result){if(result.code == web_status.SUCCESS){showLayerGroup.clearLayers();for(var i = 0;i< result.data.length;i++){var countryData = result.data[i];var color = countryData.fullChineseName == "伊朗伊斯兰共和国" ? "#0c8f2e" : "#e91212f7";var areaLayer = L.geoJSON(JSON.parse(countryData.geomJson),{style: {color:color,weight:6,"opacity":0.85}}).addTo(mymap);var myIcon = L.divIcon({iconSize: null,className: '',popupAnchor:[5,5],shadowAnchor:[5,5],html: "<div class='marsBlackPanel' style='background:" + color + ";' animation-spaceInDown><div class='marsBlackPanel-text'>" + countryData.fullChineseName+"<span class='temperature'></span></div><div class='marsBlackPanel-text'>"+countryData.shortEnglishName + "\t首都:"+ countryData.nameZh+"<span class='temperature'></span></div></div>"});showLayerGroup.addLayer(areaLayer);//中心点位L.marker(L.latLng(countryData.lat, countryData.lon), { icon: myIcon}).addTo(showLayerGroup);}for(var i = 0;i< result.militaries.length;i++){var military = result.militaries[i];var color = "#c5bf16";var cnName = military.cnName != null && military.cnName != undefined ?  military.cnName : "";var myIcon = L.divIcon({iconSize: null,className: '',popupAnchor:[5,5],shadowAnchor:[5,5],html: "<div class='marsBlackPanel' style='background:" + color + ";' animation-spaceInDown><div class='marsBlackPanel-text'>"+ (i + 1) +"、"+ military.enName + cnName +"<span class='temperature'></span></div><div class='marsBlackPanel-text'>"+ "美军基地，距离："+ military.distance.toFixed(2)+"千米<span class='temperature'></span></div></div>"});//中心点位L.marker([military.lat, military.lon], { icon: myIcon}).addTo(collisionLayer);}collisionLayer.addTo(mymap);//showLayerGroup.addLayer(collisionLayer);mymap.fitBounds(showLayerGroup.getBounds());}},error:function(){$.modal.alertWarning("获取空间信息失败");}});

        到此，基于Leaflet的前端可视化构建就基本完成了。下面的内容将一起来看一下最后的效果。 

三、成果分析

        最后来看一下系统的成果，是如何从多个角度来进行冲突的展示和讲述。

1、冲突双方

        首先来看一下冲突的双方，在地图中可以直观的看到冲突的双方如下图所示：

        通过这里可以看到两个冲突的对象，比如以色列和伊朗，在两者中间其实还隔着其它的国家。 比较明显容易看到的是两个国家相隔较远，同时从国土面积来说，以色列的国土面积比伊朗小多了。从首都的位置可能，伊朗更偏向于领土的内部，以色列的特拉维夫，是比较靠海和空间位置不太有利的地方。

2、域外势力

        大家如果看新闻的话，应该记得在冲突后，伊朗是选择对漂亮国的基地进行了打击。因此我们使用PostGIS查询了距离较近的10个基地信息，具体的基地信息列表在第一节第二小节已经进行了分析和结果展示。这里主要来看一下这些基地的空间分布情况是什么样子的？首先来看一下域外基地位置信息。

        可以看到，在波斯湾周围，伊朗于基地的距离最短的只有121千米，这么一点距离，使用常规手段就足以发挥出相应的价值。 紧随其后的192千米。再从一个基地的数量看来，在巴林居然同时拥有多个基地，如下图：

        除了巴林以外，在卡塔尔也是进行多个基地的部署。卡塔尔分布如下所示：

四、总结

        以上就是本文的主要内容， 本研究旨在通过整合 SpringBoot 与 Leaflet 技术，以伊以冲突为典型案例，构建一个可视化系统。这不仅能为研究人员、政策制定者等提供直观的态势图，还能为后续深入分析成因、发展规律及影响提供可视化支撑，助力寻找和平解决的可能途径。行文仓促，定有不足之处，欢迎各位朋友在评论区批评指正，不胜感激。

http://www.xdnf.cn/news/14648.html

相关文章：

  • Robyn高性能Web框架系列06：使用WebSocket实现产品智能助理
  • SQL学习笔记3
  • 图像质量对比感悟
  • 智表ZCELL产品V3.2 版发布，新增拖动调整行列功能，修复了插件引用相对路径等问题
  • 【C++11】右值引用和移动语义
  • Hive3.1.3加载paimon-hive-connector-3.1-1.1.1.jar报错UnsatisfiedLinkError
  • 解决uniapp vue3版本封装组件后:deep()样式穿透不生效的问题
  • 【攻防篇】解决：阿里云docker 容器中自动启动xmrig挖矿
  • 超实用AI工具分享——ViiTor AI视频配音功能教程（附图文）
  • php项目部署----------酒店项目
  • 知攻善防应急靶机 Windows web 3
  • LVS-DR负载均衡群集深度实践：高性能架构设计与排障指南
  • 笔记02：布线-差分对的设置与添加
  • Liunx操作系统笔记2
  • 《解锁前端潜力：自动化流程搭建秘籍》
  • Boosting：从理论到实践——集成学习中的偏差征服者
  • linux-修改文件命令（补充）
  • Jenkins Pipeline 与 Python 脚本之间使用环境变量通信
  • 数的三次方根
  • 【深度学习新浪潮】空间计算的医疗应用技术分析（简要版）
  • TCP/UDP协议深度解析（二）：TCP连接管理全解，三次握手四次挥手的完整流程
  • Linux docker拉取镜像报错解决
  • 空间理解模型 SpatialLM 正式发布首份技术报告
  • 数据结构 顺序表与链表
  • 一步部署APache编译安装脚本
  • 基于SSM框架+mysql实现的监考安排管理系统[含源码+数据库+项目开发技术手册]
  • 使用VIVADO合并FPGA bit文件和Microblaze elf
  • SQL学习笔记2
  • 【大厂机试题解法笔记】可以组成网络的服务器
  • 使用亮数据网页抓取API自动获取Tiktok数据