JavaScript大前端
基于百度天气接口的空气质量 WebGIS 可视化实践——以湖南省为例
基于百度天气接口结合 PostgreSQL 数据库与 Leaflet 库，实现了湖南省空气质量数据的 WebGIS 可视化。通过 SQL 查询获取区县 AQI 数据，利用 JavaScript 定义 AQI 等级颜色映射方案，在地图上动态渲染不同污染程度的区域分布。系统支持温度与 AQI 图例切换及空间数据标注，展示了全省整体污染情况、重污染地区分布及优质地区排名，为环境决策提供直观的数据支撑。
基于百度天气接口结合 PostgreSQL 数据库与 Leaflet 库，实现了湖南省空气质量数据的 WebGIS 可视化。通过 SQL 查询获取区县 AQI 数据，利用 JavaScript 定义 AQI 等级颜色映射方案，在地图上动态渲染不同污染程度的区域分布。系统支持温度与 AQI 图例切换及空间数据标注，展示了全省整体污染情况、重污染地区分布及优质地区排名，为环境决策提供直观的数据支撑。
在当今数字化时代，地理信息系统（GIS）技术与网络技术的深度融合，催生了 WebGIS 这一强大的信息展示与分析平台。它能够将复杂的空间数据以直观、交互的方式呈现给用户，极大地提高了信息的可理解性和可用性。空气质量作为与人们生活息息相关的重要环境指标，其数据的可视化呈现对于公众健康、环境管理和决策支持都具有极为重要的意义。
湖南省地处我国中部，随着经济的快速发展和城市化进程的加速，空气质量一直是老百姓生活生产比较关心的重要指标之一。在这样的背景下，我们基于百度天气凭借其在数据收集、分析方面的强大能力，开启了空气质量 WebGIS 可视化的创新实践。WebGIS 技术的应用，为百度天气的空气质量可视化带来了全新的视角和体验。通过将空气质量数据与地理空间信息相结合，在地图上构建了一个动态、交互的空气质量展示平台。
本节将以上周末的一次空气污染事件为例，结合百度的天气接口，对 10 月 12 日湖南省的一次空气污染需求展示进行讲解。
来看互联网上关于周末的空气情况的新闻，如下图：
长沙市生态环境保护委员会办公室发布最新回应，受上游地区秸秆露天焚烧传输影响，长沙市空气质量达到中重度污染。
我们在哪里可以查看全省的空气质量情况呢？本次空气污染过程除了长沙，其它城市的空气质量情况如何呢？除了表格数据，我们更想基于 WebGIS 来进行空间数据展示。能够识别出空气污染的大致范围，未来可以结合风力和风向数据，可以预判未来的空气质量改良情况。
本文将简单介绍关于空气质量等级的基本知识，了解空气质量等级包含哪些内容。如何确定空气质量，本小节还将详细讲述如何基于百度的天气接口进行数据查询的实现，最后讲解如何使用 Leaflet 来集成百度的空气质量进行可视化展示。
| 空气指数 | 空气状况 | 对健康影响情况 | 建议采取的措施 |
|---|---|---|---|
| 0-50 | 优 | 空气质量令人满意，基本无空气污染，对健康没有危害 | 各类人群可多参加户外活动，多呼吸一下清新的空气。 |
| 51-100 | 良好 | 除少数对某些污染物特别敏感的人群外，不会对人体健康产生危害 | 除少数对某些污染物特别容易过敏的人群外，其他人群可以正常进行室外活动。 |
| 101-150 | 轻度污染 | 敏感人群症状会有轻度加剧，对健康人群没有明显影响 | 儿童、老年人及心脏病、呼吸系统疾病患者应尽量减少体力消耗大的户外活动。 |
| 151-200 | 中度污染 | 敏感人群症状进一步加剧，可能对健康人群的心脏、呼吸系统有影响 | 儿童、老年人及心脏病、呼吸系统疾病患者应尽量减少外出，停留在室内，一般人群应适量减少户外运动。 |
| 201-300 | 重度污染 | 空气状况很差，会对每个人的健康都产生比较严重的危害 | 儿童、老年人及心脏病、肺病患者应停留在室内，停止户外运动，一般人群尽量减少户外运动。 |
| >300 | 严重污染 | 空气状况极差，所有人的健康都会受到严重危害 | 儿童、老年人和病人应停留在室内，避免体力消耗，除有特殊需要的人群外，一般人群尽量不要停留在室外。 |
这里说的空气指数，就是 AQI。通过百度的天气接口可以获取行政区的天气信息数据。
在 PG 数据库中实现空气质量查询的 SQL 语句如下：
SELECT t2.*,T.province_code,T.province_name,T.city_code,T.city_name,T.area_code, T.area_name,t1.geom,st_asgeojson ( T.geom ) geomJson,st_x ( t1.geom ) lon, st_y ( t1.geom ) lat FROM biz_weather_now t2, biz_area T, biz_geographic_name t1 WHERE to_char( t2.uptime, 'YYYY-MM-DD' ) = '2025-10-12' AND T.province_code = '430000' AND T.area_name = t1.NAME AND T.area_code = t2.location_code AND st_contains ( T.geom, t1.geom ) ORDER BY T.area_code;
在数据库中执行以上语句以后可以得到以下结果：
图中的 AQI 就是不同的区县对应的空气质量指数。
为了方便使用 Leaflet 进行空气质量进行空间展示，可以按照以下步骤进行 WebGIS 可视化集成。
第一步：定义空气质量指数与颜色的对应关系，前端使用 Javascript 来进行定义，核心代码如下：
//AQI 空气指数配置 var aqiColorList = [ {name:"优 (0–50)",color:"#00FF00",rgb:new Color(0, 255, 0),colorDesc:"绿色"}, {name:"良 (51–100)",color:"#FFFF00",rgb:new Color(255, 255, 0),colorDesc:"黄色"}, {name:"轻度污染 (101–150)",color:"#FFA500",rgb:new Color(255, 165, 0),colorDesc:"橙色"}, {name:"中度污染 (151–200)",color:"#FF0000",rgb:new Color(255, 0, 0),colorDesc:"红色"}, {name:"重度污染 (201–300)",color:"#800080",rgb:new Color(128, 0, 128),colorDesc:"紫色"}, {name:"严重污染 (>300)",color:"#993366",rgb:new Color(153, 51, 102),colorDesc:"褐红色"} ];
第二步：在进行中文标注时，需要根据 AQI 来动态生成颜色值，转换方法如下：
function getColorByAqi(aqi){ var aqival = parseInt(aqi); if(aqival >= 0 && aqival <= 50) { return "#00FF00"; } if(aqival >= 51 && aqival <= 100) { return "#FFFF00"; } if(aqival >= 101 && aqival <= 150) { return "#FFA500"; } if(aqival >= 151 && aqival <= 200) { return "#FF0000"; } if(aqival >= 201 && aqival <= 300) { return "#800080"; } if(aqival >= 300) { return "#993366"; } }
第三步，为了兼容在空气质量展示时可以进行温度的切换，地图的图例也要可以切换，切换图例的方法如下：
function initLegendAndColor(type){ var legendData = new Array(); var colorArray = new Array(); var _targetDataList; if(type == "tem"){ _targetDataList = weatherColorList; }else{ _targetDataList = aqiColorList; } for(var i = 0;i<_targetDataList.length;i++){ var _tempData = _targetDataList[i]; legendData.push({ label: "\xa0\xa0"+_tempData.name , type: "rectangle", radius: 12, color: _tempData.color, fillColor: _tempData.color, fillOpacity: 0.8, weight: 2}); colorArray.push(_tempData.rgb); } if(type == "tem"){ DIY_BLUE_GREEN_YELLOW_RED_SCHEME = new MultiColorScheme('', -20,45 ,colorArray); }else{ DIY_BLUE_GREEN_YELLOW_RED_SCHEME = new MultiColorScheme('', 0,360 ,colorArray); } initLegend(legendData); }
第四步、实现 AQI 数据的标注及展示。核心方法如下：
//展示 AQI 空气质量数据 function previewAQI(pid,provinceCode,name){ previewProvince(pid,name); initLegendAndColor("aqi"); $.ajax({ type:"get", url:ctx + "/met/province/weather/list/"+provinceCode+"?day=", data:{}, dataType:"json", cache:false, processData:false, success:function(result){ if(result.code == web_status.SUCCESS){ $("#title_info").html(name+"空气质量<sub>更新时间:" + $("#startTime").val() +"</sub>"); collisionLayer.clearLayers(); var dataArray = result.data; if(dataArray != null && dataArray.length > 1){ var legendData = new Array(); for(var i = 0;i< dataArray.length;i++){ var areaData = dataArray[i]; var color = getColorByAqi(areaData.aqi); var areaLayer = L.geoJSON(JSON.parse(areaData.geomJson),{style: {color:color,fillColor:color,weight:3,"opacity":0.65, fillOpacity: 0.65 }}).addTo(mymap); var myIcon = L.divIcon({ iconSize: null, className: '', popupAnchor:[5,5], shadowAnchor:[5,5], html: buildShowInfo(i,color,areaData,"aqi") }); showLayerGroup.addLayer(areaLayer); //中心点位 L.marker([areaData.lat, areaData.lon], { icon: myIcon}).addTo(collisionLayer); } collisionLayer.addTo(showLayerGroup); } } }, error:function(){ $.modal.alertWarning("获取空间信息失败"); } }); }
经过以上的步骤就可以基本实现在 Leaflet 中集成百度空气质量信息，下面将对成果进行展示。
本节将对 WebGIS 的成果进行整体介绍，包括湖南省整体空气质量情况的展示，中、重污染地区的展示以及低、优质地区的分布情况进行介绍。最后使用列表对污染最严重的前 10 名区县和空气质量最好的前 10 名进行排名展示。
从整体来看，10 月 12 日这一天，全省可以分为三个比较明显的区域，首先映入眼帘一片红色的是湘东北地区，像长沙、株洲、浏阳都是非常严重的地区。湘中和湘南一块的空气质量也不是很好，只达到了良的情况，达到良的区县占到了一半以上。剩下是湘西新晃和湘西北区域，同时湘东南郴州的空气质量也是达到了优。
来深入看一下重污染地区，以长沙市周边为例，如下图所示：
围绕着长沙的株洲、湘潭、宁乡、岳阳的区域，空气质量都只中度，还有几个区县甚至达到了重度污染的级别。浏阳等地区的 AQI 指数达到了 230。这是比较高的一个等级了。
来看空气质量优质的几个地区，比如湘西北的龙山、花垣、永顺、桑植等区县，空气质量还是非常不错的，都是优质区域，空气质量分布情况如下：
除了湘西北的区县，郴州的汝城、宜章、桂东、北湖、嘉禾等区县空气质量也是不错的。如下图所示：
| 城市代码 | 城市名称 | 区县代码 | 区县名称 | 空气质量指数 |
|---|---|---|---|---|
| 430100 | 长沙市 | 430181 | 浏阳市 | 238.00 |
| 430200 | 株洲市 | 430281 | 醴陵市 | 238.00 |
| 430200 | 株洲市 | 430211 | 天元区 | 238.00 |
| 430200 | 株洲市 | 430212 | 渌口区 | 238.00 |
| 430200 | 株洲市 | 430202 | 荷塘区 | 238.00 |
| 430200 | 株洲市 | 430204 | 石峰区 | 238.00 |
| 430200 | 株洲市 | 430203 | 芦淞区 | 238.00 |
| 430100 | 长沙市 | 430182 | 宁乡市 | 220.00 |
| 430100 | 长沙市 | 430104 | 岳麓区 | 220.00 |
| 430100 | 长沙市 | 430112 | 望城区 | 220.00 |
可以看到，10 月 12 日这天，有 7 个区县的空气质量指数为 238，其中长沙市 4 个，剩余株洲市 6 个。
看完污染严重的前 10 名，再来看看哪里的空气比较好，按优质的前 10 名排名如下：
| 城市代码 | 城市名称 | 区县代码 | 区县名称 | 空气质量指数 |
|---|---|---|---|---|
| 431200 | 怀化市 | 431227 | 新晃侗族自治县 | 29.00 |
| 431000 | 郴州市 | 431002 | 北湖区 | 39.00 |
| 431000 | 郴州市 | 431027 | 桂东县 | 39.00 |
| 431000 | 郴州市 | 431003 | 苏仙区 | 39.00 |
| 430700 | 常德市 | 430702 | 武陵区 | 40.00 |
| 431100 | 永州市 | 431122 | 东安县 | 40.00 |
| 431100 | 永州市 | 431103 | 冷水滩区 | 40.00 |
| 431100 | 永州市 | 431129 | 江华瑶族自治县 | 40.00 |
| 433100 | 湘西土家族苗族自治州 | 433130 | 龙山县 | 42.00 |
| 430800 | 张家界市 | 430811 | 武陵源区 | 44.00 |
可以看到，当日省内空气质量最好的是怀化市的新晃自治县。就当日采集的数据来看，勇夺桂冠，空气质量杠杠的。
以上就是本文的主要内容，本文通过将空气质量数据与地理空间信息相结合，百度天气在湖南省的地图上构建了一个动态、交互的空气质量展示平台。用户可以清晰地看到各地的空气质量等级，从优良的绿色到重度污染的深红色，色彩鲜明的分区标识让空气质量状况一目了然。百度天气的空气质量 WebGIS 可视化平台不仅在技术上实现了创新，更在用户体验上做到了极致。平台采用了先进的交互设计，用户可以通过简单的鼠标操作或触摸手势，轻松地缩放地图、切换不同时间尺度的数据展示，以及查询特定区域的空气质量数据。这种高度的交互性，使得用户能够根据自己的需求，深入探索和分析空气质量数据，从而更好地理解自己所处环境的空气质量状况。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online