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

在 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;

执行以上语句可以得到包含 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 区县

可以看到，10 月 12 日这天，有 7 个区县的空气质量指数为 238，其中长沙市 4 个，剩余株洲市 6 个。

5、质量优前 10 区县

看完污染严重的前 10 名，再来看看哪里的空气比较好，按优质的前 10 名排名如下：

可以看到，当日省内空气质量最好的是怀化市的新晃自治县。

四、总结

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