跳到主要内容基于百度天气 API 的空气质量 WebGIS 可视化实践 | 极客日志JavaScript大前端算法
基于百度天气 API 的空气质量 WebGIS 可视化实践
基于 WebGIS 技术实现空气质量可视化的方案。通过调用百度天气接口获取湖南省各区县 AQI 数据,结合 PostgreSQL 数据库存储地理信息,利用 Leaflet 库在前端进行地图渲染。实现了 AQI 等级与颜色的动态映射,支持温度与污染等级的图例切换。展示了湖南省整体及重点区域的空气质量分布情况,包括重污染区与优质区的对比分析,以及污染严重和质量优的前十区县排名。该方案提供了直观的空间数据分析能力,有助于环境监测与决策支持。
极光2 浏览 前言
地理信息系统(GIS)与网络技术的融合催生了 WebGIS 平台,能够将复杂的空间数据以直观、交互的方式呈现。空气质量作为重要的环境指标,其数据的可视化对公众健康及环境管理具有重要意义。本文介绍基于百度天气接口开展空气质量 WebGIS 可视化的实践方案。

一、空气质量展示需求
本节结合百度天气接口,讲解湖南省某次空气污染事件的展示需求。
1、案例背景
互联网新闻显示,受上游地区秸秆露天焚烧传输影响,长沙市空气质量达到中重度污染。


2、空气质量状况
除了表格数据,我们更希望基于 WebGIS 进行空间数据展示,识别空气污染的大致范围。
二、WebGIS 展示百度天气
本文将介绍空气质量等级知识,讲述如何基于百度天气接口查询数据,并使用 Leaflet 集成进行可视化展示。
1、关于空气质量等级
| 空气指数 | 空气状况 | 对健康影响情况 | 建议采取的措施 |
|---|
| 0-50 | 优 | 空气质量令人满意,基本无空气污染,对健康没有危害 | 各类人群可多参加户外活动,多呼吸一下清新的空气。 |
| 51-100 | 良好 | 除少数对某些污染物特别敏感的人群外,不会对人体健康产生危害 | 除少数对某些污染物特别容易过敏的人群外,其他人群可以正常进行室外活动。 |
| 101-150 | 轻度污染 | 敏感人群症状会有轻度加剧,对健康人群没有明显影响 | 儿童、老年人及心脏病、呼吸系统疾病患者应尽量减少体力消耗大的户外活动。 |
| 151-200 | 中度污染 | 敏感人群症状进一步加剧,可能对健康人群的心脏、呼吸系统有影响 | 儿童、老年人及心脏病、呼吸系统疾病患者应尽量减少外出,停留在室内,一般人群应适量减少户外运动。 |
| 201-300 | 重度污染 | 空气状况很差,会对每个人的健康都产生比较严重的危害 | 儿童、老年人及心脏病、肺病患者应停留在室内,停止户外运动,一般人群尽量减少户外运动。 |
| >300 | 严重污染 | 空气状况极差,所有人的健康都会受到严重危害 | 儿童、老年人和病人应停留在室内,避免体力消耗,除有特殊需要的人群外,一般人群尽量不要停留在室外。 |
这里说的空气指数即 AQI。通过百度天气接口可以获取行政区的天气信息数据。
2、数据查询实现
微信扫一扫,关注极客日志
微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
相关免费在线工具
- 加密/解密文本
使用加密算法(如AES、TripleDES、Rabbit或RC4)加密和解密文本明文。 在线工具,加密/解密文本在线工具,online
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆,或 javascript-obfuscator 高强度混淆(体积会增大)。 在线工具,JavaScript 压缩与混淆在线工具,online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
在 PostgreSQL 数据库中实现空气质量查询的 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;
3、Leaflet 集成百度空气质量
为了方便使用 Leaflet 进行空气质量空间展示,可按以下步骤进行 WebGIS 可视化集成。
第一步:定义空气质量指数与颜色的对应关系,前端使用 JavaScript 定义,核心代码如下:
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 数据的标注及展示。核心方法如下:
function previewAQI(pid,provinceCode,name){
previewProvince(pid,name);
initLegendAndColor("aqi");
$.ajax({
type:"get",
url:ctx + "/met/province/weather/list/"+provinceCode+"?day="+ $("#startTime").val(),
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 名进行排名展示。
1、整体展示
从整体来看,10 月 12 日这一天,全省可以分为三个比较明显的区域。湘东北地区如长沙、株洲、浏阳是非常严重的地区。湘中和湘南一块的空气质量也不是很好,只达到了良的情况。剩下是湘西新晃和湘西北区域,同时湘东南郴州的空气质量也是达到了优。
2、中、重污染地区
来深入看一下重污染地区,以长沙市周边为例,如下图所示:
围绕着长沙的株洲、湘潭、宁乡、岳阳的区域,空气质量都只中度,还有几个区县甚至达到了重度污染的级别。浏阳等地区的 AQI 指数达到了 230。
3、低、优质地区
来看空气质量优质的几个地区,比如湘西北的龙山、花垣、永顺、桑植等区县,空气质量还是非常不错的,都是优质区域,空气质量分布情况如下:
除了湘西北的区县,郴州的汝城、宜章、桂东、北湖、嘉禾等区县空气质量也是不错的。如下图所示:
4、污染严重前 10 区县
| 城市代码 | 城市名称 | 区县代码 | 区县名称 | 空气质量指数 |
|---|
| 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 个。
5、质量优前 10 区县
看完污染严重的前 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 |
可以看到,当日省内空气质量最好的是怀化市的新晃自治县。
四、总结
本文通过将空气质量数据与地理空间信息相结合,构建了动态、交互的空气质量展示平台。用户可以清晰地看到各地的空气质量等级,色彩鲜明的分区标识让空气质量状况一目了然。平台采用了先进的交互设计,用户可以通过简单的鼠标操作或触摸手势,轻松地缩放地图、切换不同时间尺度的数据展示,以及查询特定区域的空气质量数据。这种高度的交互性,使得用户能够根据自己的需求,深入探索和分析空气质量数据,从而更好地理解自己所处环境的空气质量状况。