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

基于SpringBoot和Leaflet的全球机场空间分布可视化实战

article 2025/1/5 7:50:25

目录

前言

一、航空机场的空间模型

1、空间表简介

2、数据查询

二、机场WebGIS空间分布可视化

1、后台数据查询

2、Leaflet页面开发

三、WebGIS分析 

1、全球航空格局

2、我国机场影像

四、总结

前言

        时光轻轻挥别2024，来到了2025年。在崭新的2025年里，祝愿大家万事顺遂，心想事成，平平安安。不知道昨天的跨年夜，大家都是怎么过的呢。

        在当今这个信息爆炸的时代，数据可视化已经成为我们理解和分析复杂数据集的重要工具。特别是地理信息系统（GIS）和空间分析的应用，它们能够将抽象的数据转化为直观的地图和图表，使得信息的传达更加高效和直观。随着全球化的不断深入，航空运输作为连接世界各地的重要纽带，其数据的分析和可视化显得尤为重要。机场作为航空运输的节点，其分布情况直接关系到航线的规划、资源的配置以及旅客的出行选择。

        在已经结束的2024年里，在年终岁尾的最后几天。全球的多个航班都发生了令人心痛的航空安全事件。从阿塞拜疆到韩国、到漂亮国。最近发生的这几起安全事故都造成了严重的人员伤亡。后面我们再结合时间和空间信息来整体盘点历年的一些航空安全事故。

        本项目的目标是实现一个全球机场的空间分布可视化系统，用户可以通过该系统直观地查看全球机场的分布情况，包括机场的位置、名称、所在国家等信息。此外，系统还将提供一些基本的分析功能，如机场密度分析等，帮助用户更深入地理解全球航空网络的结构和特点。

        本文我们将详细介绍如何使用SpringBoot构建后端服务，包括数据的获取、处理和存储。同时，我们将探讨如何使用Leaflet在前端构建地图，并实现与后端服务的交互。此外，我们还将涉及到一些高级话题，如性能优化、用户体验设计等，以确保最终的产品既高效又易用。如果您也关注这些方面的知识，不妨来这里看看。

一、航空机场的空间模型

        在进行全面的机场空间分布分析前，我们首先要准备全球的航空机场信息。需要将这些数据全部保存到空间数据库中。然后使用SpringBoot从后台操作空间数据库，为前端的Leaflet空间展示提供数据基础。作为所有功能的基础，这里首先把数据的相关信息介绍一下。

1、空间表简介

        航空机场的空间表是存储机场信息的重要基础组件，关于全球机场的空间表在之前的博文中有所提及：基于SpringBoot和PostGIS的全球机场入库实践，在博客中也介绍了相应的空间表信息。为了方便第一次阅读本文的朋友，这里还是将空间表的结构信息分享给大家。

        对应的数据库表结构SQL如下所示：

CREATE TABLE "biz_global_airport_info" (
  "pk_id" int8 NOT NULL,
  "iata_code" varchar(5) COLLATE "pg_catalog"."default" NOT NULL,
  "name_zh" varchar(100) COLLATE "pg_catalog"."default",
  "name_en" varchar(100) COLLATE "pg_catalog"."default",
  "lon_wgs84" numeric(18,11),
  "lat_wgs84" numeric(18,11),
  "city_name" varchar(30) COLLATE "pg_catalog"."default",
  "national_name_en_short" varchar(10) COLLATE "pg_catalog"."default",
  "national_name_zh" varchar(30) COLLATE "pg_catalog"."default",
  "geom" "public"."geometry",
  CONSTRAINT "pk_biz_global_airport_info" PRIMARY KEY ("pk_id")
);

CREATE INDEX "idx_biz_global_airport_info_geom" ON "biz_global_airport_info" USING gist (
  "geom" "gist_geometry_ops_2d"
);
COMMENT ON COLUMN "biz_global_airport_info"."pk_id" IS '主键';
COMMENT ON COLUMN "biz_global_airport_info"."iata_code" IS 'IATA三字码';
COMMENT ON COLUMN "biz_global_airport_info"."name_zh" IS '中文名称';
COMMENT ON COLUMN "biz_global_airport_info"."name_en" IS '英文名称';
COMMENT ON COLUMN "biz_global_airport_info"."lon_wgs84" IS '经度-wgs84';
COMMENT ON COLUMN "biz_global_airport_info"."lat_wgs84" IS '纬度-wgs84';
COMMENT ON COLUMN "biz_global_airport_info"."city_name" IS '城市名称';
COMMENT ON COLUMN "biz_global_airport_info"."national_name_en_short" IS '国家英文简称';
COMMENT ON COLUMN "biz_global_airport_info"."national_name_zh" IS '国家/地区中文';
COMMENT ON TABLE "biz_global_airport_info" IS '全球机场信息表，用于存储机场基本信息';

2、数据查询

        这里分享一些我们采集的机场数据，这些机场信息不仅包含商用民航机场信息，还包括通航飞机机场。这里将展示部分的数据。

        查询机场总数据量，查询sql：

select count(1) from biz_global_airport_info;

-- 9596

        查询美国的机场信息（非空间查询，仅以属性查询）：

select * from biz_global_airport_info where national_name_en_short = 'US';

        执行后可以看到美国的机场（包括通航）的数据大约有2219条，

        通过数据可以很明显的看到，美国的航空业是比较发达的。美国的机场约占全球机场的 23%。

        下面看下我们国家的民航机场数据，查询sql如下：

select * from biz_global_airport_info where national_name_en_short = 'CN';

        从数据上来说，机场规模还是有一定差距的。我们国家的机场数量仅为296，随着我国经济的不断发展，是否需要发展更大规模的机场呢。这个要看整体的发展趋势。以上仅从属性查询的数据，下面我们结合WebGIS来重点展示全球的机场空间分布情况。

二、机场WebGIS空间分布可视化

        本节将重点结合Leaflet来进行机场空间WebGIS展示，由于机场信息在空间上密度重叠，因此采用空间聚类的方法来实现空间数据的可视化。能快速的看到全球机场的空间密度信息。

1、后台数据查询

        后台使用SpringBoot开发一个全球所有机场信息列表的查询接口，可以将所有的机场信息全部查询出来，然后叠加到Leaflet的图层上。业务层中的查询实现如下所示：

@Override
public List<GlobalAirportInfo> selectList(GlobalAirportInfo airportInfo) {
	QueryWrapper<GlobalAirportInfo> queryWrapper = new QueryWrapper<GlobalAirportInfo>();
    if(StringUtils.isNotBlank(airportInfo.getNameZh())){
        queryWrapper.like("name_zh", airportInfo.getNameZh());
    }
    if(StringUtils.isNotBlank(airportInfo.getNameEn())){
        queryWrapper.like("name_en", airportInfo.getNameEn());
    }
    if(StringUtils.isNotBlank(airportInfo.getIataCode())){
        queryWrapper.like("iata_code", airportInfo.getIataCode());
    }
    queryWrapper.select(" pk_id,iata_code,name_zh,name_en,lon_wgs84,lat_wgs84,city_name,national_name_en_short,national_name_zh ");
    queryWrapper.orderByAsc("national_name_en_short");
    return this.baseMapper.selectList(queryWrapper);
}

        随后还需要在控制层定义相应的API接口，后台关键代码如下所示：

/**
 * - 获取机场信息列表
 * @param 
 * @return
 */
@PostMapping("/data")
@ResponseBody
public AjaxResult airportInfo(){
    List<GlobalAirportInfo> list = airportInfoService.selectList(new GlobalAirportInfo());
    AjaxResult ar = AjaxResult.success();
    ar.put("data", list);
    return ar;
}

        准备好上述的数据接口后，下面我们来进行WebGIS界面开发。

2、Leaflet页面开发

        关于如何在Leaflet当中进行WebGIS展示的知识，在此不再赘述。大家可以翻阅之前的一些博客，学习如何使用Leaflet来进行地图的开发。为了将所有的机场信息都展示在一起，又不至于太密级，同时可以看到全球的机场空间分布及数量密度关系。这里使用的是空间聚类的组件，即markerClusterGroup。这里分享如何将机场的经纬度marker添加到聚类图层中。

function initAirportMap(){
	$.ajax({
	     type: "post",
	     url: prefix + "/data",
	     data: {},
	     success: function(rsData) {
	        var markers = L.markerClusterGroup();
	    	var earthData = rsData.data;
	    	for (var i = 0; i < earthData.length; i++) {
	    		var info = earthData[i];
	    		var strokeStyleSet = "green";
	    		var marker = L.circleMarker(new L.LatLng(info.latWgs84, info.lonWgs84), {radius: 8,
	    		labelStyle: {
		    		text: info.nameZh != "" ? info.nameZh : info.nameEn,
		    		rotation: 0,
		    		zIndex: i,
		    		strokeStyle :strokeStyleSet
		    	}});
	    		var content = "<strong>IATA代码:</strong>"+info.iataCode + "<br/><strong>中文名称:</strong>"+info.nameZh;
	    		content += "<br/><strong>英文名称:</strong>"+info.nameEn + "<br/><strong>城市名称:</strong>"+info.cityName;
	    		content += "<br/><strong>国家简称:</strong>"+info.nationalNameEnShort + "<br/><strong>国家/地区中文:</strong>"+info.nationalNameZh;
	    		marker.bindPopup(content);
	    		markers.addLayer(marker);
	    	}
	    	mymap.addLayer(markers);
	   }
	});
}

        来看实际的效果：

三、WebGIS分析 

        本节将重点展示全球机场的空间分布情况，通过空间展示分析，可以很好的展示全球的密度情况。同时结合遥感影像来看看我国的机场信息。欢迎给为航空爱好者鉴赏。

1、全球航空格局

        首先来看一下全球的航空机场格局，如下所示：

通过聚类的数字可以很明显的看到，在北美、欧洲、大洋洲等区域的机场数量是相对比较密集的。

         以上都是经济比较发达的国家和地区，同时可以看到，在非洲北部，机场分布比较少。可以简单的分析，民航的发达程度与经济的发达程度有一定的相关性。

        而对我们来说，机场的分布规模与经济发展也是密切相关的，如下图：

        大多数机场都是分布在长三角、珠三角、京津冀、中部地区，而西部地区与北部地区的民航机场相对来讲比较少。 

2、我国机场影像

        下面来看一下我国的几个标志性机型的遥感影像信息。各位航空达人来找找平时大家经常打卡的机场有没有？

        上海虹桥国际机场（Shanghai Hongqiao International Airport，IATA：SHA，ICAO：ZSSS），位于中国上海市长宁区和闵行区交界处，距市中心13千米，为4E级民用国际机场，是中国三大门户复合枢纽之一 、国际定期航班机场、对外开放的一类航空口岸和国际航班备降机场 。 

        北京大兴国际机场（Beijing Daxing International Airport，IATA：PKX，ICAO：ZBAD），位于中国北京市大兴区榆垡镇、礼贤镇和河北省廊坊市广阳区九州镇交界处，北距天安门46千米、北距北京首都国际机场67千米、南距雄安新区55千米、西距北京南郊机场约640米（围场距离），为4F级国际机场、国际航空枢纽、国家发展新动力源 。

        长沙黄花国际机场（Changsha Huanghua International Airport，IATA：CSX，ICAO：ZGHA，CAAC：HHA ），位于中国湖南省长沙市长沙县黄花镇空港城一号路，西距长沙市中心23.5千米，为4E级国际机场 、中国十二大干线机场之一、国际定期航班机场、对外开放的一类航空口岸、中国十大区域性国际航空枢纽之一、中国（湖南）自由贸易试验区门户机场、湖南航空主运营基地。

四、总结

        以上就是本文的主要内容，本文我们将详细介绍如何使用SpringBoot构建后端服务，包括数据的获取、处理和存储。同时，我们将探讨如何使用Leaflet在前端构建地图，并实现与后端服务的交互。此外，我们还将涉及到一些高级话题，如性能优化、用户体验设计等，以确保最终的产品既高效又易用。

        在这个数据驱动的时代，基于SpringBoot和Leaflet的全球机场空间分布可视化实战项目不仅是一次技术实践，更是一次对数据价值的探索。我们期待通过这个项目，能够让更多的人认识到数据可视化的力量，并将其应用到更多的领域中去。让我们一起期待这个项目的成果，也期待它能够为我们打开一扇新的窗户，让我们以全新的视角看待这个世界。行文仓促，难免有许多不足之处，在此欢迎各位专家朋友在评论区不吝指出，不胜感激。最后再次祝大家新年快乐。


http://www.kler.cn/a/461672.html

相关文章：

  • HTML——28.音频的引入
  • 数据库进阶教程之DDL语句（万字详解）
  • Swift Combine 学习（五）：Backpressure和 Scheduler
  • mysql连接时报错1130-Host ‘hostname‘ is not allowed to connect to this MySQL server
  • 深度学习中的离群值
  • Cursor小试1.生成一个网页的接口请求工具
  • 蓝桥杯JAVA刷题--001
  • 卸载wps后word图标没有变成白纸恢复
  • PyTorch快速入门教程【小土堆】之损失函数与反向传播
  • 在 IntelliJ IDEA 中开发 GPT 自动补全插件
  • 【C语言程序设计——循环程序设计】求解最大公约数（头歌实践教学平台习题）【合集】
  • 【优选算法】Binary-Blade：二分查找的算法刃（上）
  • 动态规划五——回文串问题
  • Java后端常见问题 （一）jar:unknown was not found in alimaven
  • 一、Git与GitHub基础说明
  • 企业数字化转型的构念及实现路径
  • uniapp 打包apk
  • 基于深度学习的视觉检测小项目（一） 项目概况
  • 在Linux系统中配置邮件发送功能
  • SpringBoot使用TraceId日志链路追踪
  • 以EM算法为例介绍坐标上升（Coordinate Ascent）算法：中英双语
  • Elixir语言的函数实现
  • 打造汽车产线高效控制与降本增效新局面
  • C# 线程池的使用
  • 主线程，协程和互斥锁
  • java故障注入