基于百度天气数据的 WebGIS 空气质量可视化实践

一、空气质量展示需求

本节以一次空气污染事件为例，结合百度天气接口，对湖南省某日的空气质量展示需求进行讲解。

1、满城火辣味周末

互联网上关于周末空气情况的新闻显示：

长沙市生态环境保护委员会办公室发布回应，受上游地区秸秆露天焚烧传输影响，长沙市空气质量达到中重度污染。

2、空气质量状况

除了表格数据，我们更想基于 WebGIS 来进行空间数据展示。能够识别出空气污染的大致范围，未来可以结合风力和风向数据，预判未来的空气质量改良情况。

二、WebGIS 展示百度天气

本文将介绍空气质量等级的基本知识，讲述如何基于百度的天气接口进行数据查询的实现，最后讲解如何使用 Leaflet 来集成百度的空气质量进行可视化展示。

1、关于空气质量等级

空气指数	空气状况	对健康影响情况	建议采取的措施
0-50	优	空气质量令人满意，基本无空气污染，对健康没有危害	各类人群可多参加户外活动，多呼吸一下清新的空气。
51-100	良好	除少数对某些污染物特别敏感的人群外，不会对人体健康产生危害	除少数对某些污染物特别容易过敏的人群外，其他人群可以正常进行室外活动。
101-150	轻度污染	敏感人群症状会有轻度加剧，对健康人群没有明显影响	儿童、老年人及心脏病、呼吸系统疾病患者应尽量减少体力消耗大的户外活动。
151-200	中度污染	敏感人群症状进一步加剧，可能对健康人群的心脏、呼吸系统有影响	儿童、老年人及心脏病、呼吸系统疾病患者应尽量减少外出，停留在室内，一般人群应适量减少户外运动。
201-300	重度污染	空气状况很差，会对每个人的健康都产生比较严重的危害	儿童、老年人及心脏病、肺病患者应停留在室内，停止户外运动，一般人群尽量减少户外运动。
>300	严重污染	空气状况极差，所有人的健康都会受到严重危害	儿童、老年人和病人应停留在室内，避免体力消耗，除有特殊需要的人群外，一般人群尽量不要停留在室外。

这里说的空气指数，就是 AQI。通过百度的天气接口可以获取行政区的天气信息数据。

2、数据查询实现

在 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 就是不同的区县对应的空气质量指数。

3、Leaflet 集成百度空气质量

为了方便使用 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="+ $("#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

可以看到，当日省内空气质量最好的是怀化市的新晃自治县。就当日采集的数据来看，勇夺桂冠，空气质量杠杠的。

四、总结

本文通过将空气质量数据与地理空间信息相结合，在湖南省的地图上构建了一个动态、交互的空气质量展示平台。用户可以清晰地看到各地的空气质量等级，从优良的绿色到重度污染的深红色，色彩鲜明的分区标识让空气质量状况一目了然。平台采用了先进的交互设计，用户可以通过简单的鼠标操作或触摸手势，轻松地缩放地图、切换不同时间尺度的数据展示，以及查询特定区域的空气质量数据。这种高度的交互性，使得用户能够根据自己的需求，深入探索和分析空气质量数据，从而更好地理解自己所处环境的空气质量状况。