目录前言一、航空机场的空间模型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 selectList(GlobalAirportInfo airportInfo) { QueryWrapper queryWrapper new QueryWrapper(); 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 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 “IATA代码:”info.iataCode “中文名称:”info.nameZh; content “英文名称:”info.nameEn “城市名称:”info.cityName; content “国家简称:”info.nationalNameEnShort “国家/地区中文:”info.nationalNameZh; marker.bindPopup(content); markers.addLayer(marker); } mymap.addLayer(markers); } }); }来看实际的效果三、WebGIS分析----------本节将重点展示全球机场的空间分布情况通过空间展示分析可以很好的展示全球的密度情况。同时结合遥感影像来看看我国的机场信息。欢迎给为航空爱好者鉴赏。### 1、全球航空格局首先来看一下全球的航空机场格局如下所示通过聚类的数字可以很明显的看到在北美、欧洲、大洋洲等区域的机场数量是相对比较密集的。以上都是经济比较发达的国家和地区同时可以看到在非洲北部机场分布比较少。可以简单的分析民航的发达程度与经济的发达程度有一定的相关性。而对我们来说机场的分布规模与经济发展也是密切相关的如下图大多数机场都是分布在长三角、珠三角、京津冀、中部地区而西部地区与北部地区的民航机场相对来讲比较少。### 2、我国机场影像下面来看一下我国的几个标志性机型的遥感影像信息。各位航空达人来找找平时大家经常打卡的机场有没有上海虹桥国际机场Shanghai Hongqiao International AirportIATASHAICAOZSSS位于中国上海市长宁区和闵行区交界处距市中心13千米为4E级民用国际机场是中国三大门户复合枢纽之一 、国际定期航班机场、对外开放的一类航空口岸和国际航班备降机场 。北京大兴国际机场Beijing Daxing International AirportIATAPKXICAOZBAD位于中国北京市大兴区榆垡镇、礼贤镇和河北省廊坊市广阳区九州镇交界处北距天安门46千米、北距北京首都国际机场67千米、南距雄安新区55千米、西距北京南郊机场约640米围场距离为4F级国际机场、国际航空枢纽、国家发展新动力源 。长沙黄花国际机场Changsha Huanghua International AirportIATACSXICAOZGHACAACHHA 位于中国湖南省长沙市长沙县黄花镇空港城一号路西距长沙市中心23.5千米为4E级国际机场 、中国十二大干线机场之一、国际定期航班机场、对外开放的一类航空口岸、中国十大区域性国际航空枢纽之一、中国湖南自由贸易试验区门户机场、湖南航空主运营基地。四、总结----以上就是本文的主要内容本文我们将详细介绍如何使用SpringBoot构建后端服务包括数据的获取、处理和存储。同时我们将探讨如何使用Leaflet在前端构建地图并实现与后端服务的交互。此外我们还将涉及到一些高级话题如性能优化、用户体验设计等以确保最终的产品既高效又易用。在这个数据驱动的时代基于SpringBoot和Leaflet的全球机场空间分布可视化实战项目不仅是一次技术实践更是一次对数据价值的探索。我们期待通过这个项目能够让更多的人认识到数据可视化的力量并将其应用到更多的领域中去。让我们一起期待这个项目的成果也期待它能够为我们打开一扇新的窗户让我们以全新的视角看待这个世界。行文仓促难免有许多不足之处在此欢迎各位专家朋友在评论区不吝指出不胜感激。最后再次祝大家新年快乐。
基于SpringBoot和Leaflet的全球机场空间分布可视化实战
目录前言一、航空机场的空间模型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 selectList(GlobalAirportInfo airportInfo) { QueryWrapper queryWrapper new QueryWrapper(); 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 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 “IATA代码:”info.iataCode “中文名称:”info.nameZh; content “英文名称:”info.nameEn “城市名称:”info.cityName; content “国家简称:”info.nationalNameEnShort “国家/地区中文:”info.nationalNameZh; marker.bindPopup(content); markers.addLayer(marker); } mymap.addLayer(markers); } }); }来看实际的效果三、WebGIS分析----------本节将重点展示全球机场的空间分布情况通过空间展示分析可以很好的展示全球的密度情况。同时结合遥感影像来看看我国的机场信息。欢迎给为航空爱好者鉴赏。### 1、全球航空格局首先来看一下全球的航空机场格局如下所示通过聚类的数字可以很明显的看到在北美、欧洲、大洋洲等区域的机场数量是相对比较密集的。以上都是经济比较发达的国家和地区同时可以看到在非洲北部机场分布比较少。可以简单的分析民航的发达程度与经济的发达程度有一定的相关性。而对我们来说机场的分布规模与经济发展也是密切相关的如下图大多数机场都是分布在长三角、珠三角、京津冀、中部地区而西部地区与北部地区的民航机场相对来讲比较少。### 2、我国机场影像下面来看一下我国的几个标志性机型的遥感影像信息。各位航空达人来找找平时大家经常打卡的机场有没有上海虹桥国际机场Shanghai Hongqiao International AirportIATASHAICAOZSSS位于中国上海市长宁区和闵行区交界处距市中心13千米为4E级民用国际机场是中国三大门户复合枢纽之一 、国际定期航班机场、对外开放的一类航空口岸和国际航班备降机场 。北京大兴国际机场Beijing Daxing International AirportIATAPKXICAOZBAD位于中国北京市大兴区榆垡镇、礼贤镇和河北省廊坊市广阳区九州镇交界处北距天安门46千米、北距北京首都国际机场67千米、南距雄安新区55千米、西距北京南郊机场约640米围场距离为4F级国际机场、国际航空枢纽、国家发展新动力源 。长沙黄花国际机场Changsha Huanghua International AirportIATACSXICAOZGHACAACHHA 位于中国湖南省长沙市长沙县黄花镇空港城一号路西距长沙市中心23.5千米为4E级国际机场 、中国十二大干线机场之一、国际定期航班机场、对外开放的一类航空口岸、中国十大区域性国际航空枢纽之一、中国湖南自由贸易试验区门户机场、湖南航空主运营基地。四、总结----以上就是本文的主要内容本文我们将详细介绍如何使用SpringBoot构建后端服务包括数据的获取、处理和存储。同时我们将探讨如何使用Leaflet在前端构建地图并实现与后端服务的交互。此外我们还将涉及到一些高级话题如性能优化、用户体验设计等以确保最终的产品既高效又易用。在这个数据驱动的时代基于SpringBoot和Leaflet的全球机场空间分布可视化实战项目不仅是一次技术实践更是一次对数据价值的探索。我们期待通过这个项目能够让更多的人认识到数据可视化的力量并将其应用到更多的领域中去。让我们一起期待这个项目的成果也期待它能够为我们打开一扇新的窗户让我们以全新的视角看待这个世界。行文仓促难免有许多不足之处在此欢迎各位专家朋友在评论区不吝指出不胜感激。最后再次祝大家新年快乐。
