基于 Leaflet 与百度天气接口的空气质量 WebGIS 可视化实战

执行后返回的结果包含各行政区的 AQI 值及对应的几何坐标，这是前端渲染的基础。

3. 前端集成 Leaflet

使用 Leaflet 库进行地图渲染，核心在于颜色映射与图例切换。

定义颜色配置

首先在前端定义 AQI 指数与颜色的映射关系，方便后续逻辑调用：

// 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);
}

数据加载与渲染

最后，通过 AJAX 请求获取数据，解析 GeoJSON 并在地图上绘制区域图层及标注点：

// 展示 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) {
                    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("获取空间信息失败");
        }
    });
}

成果展示

整体分布

从整体来看，10 月 12 日这一天，全省可以分为三个比较明显的区域：

• 湘东北地区：如长沙、株洲、浏阳等地呈现红色，属于严重污染区域。
• 湘中和湘南：空气质量多为'良'，占比超过一半。
• 湘西及湘东南：新晃、郴州等地空气质量达到'优'。

重点区域分析

深入观察重污染地区，以长沙市周边为例，株洲、湘潭、宁乡、岳阳的区域空气质量多为中度，部分区县甚至达到重度污染级别。浏阳等地区的 AQI 指数达到了 230，属于较高水平。

而在湘西北的龙山、花垣、永顺、桑植等区县，以及郴州的汝城、宜章、桂东等地，空气质量保持优质状态。

排名统计

污染严重前 10 区县

可以看到，当日有 7 个区县的空气质量指数为 238，其中长沙市 4 个，株洲市 6 个。

质量优前 10 区县

当日省内空气质量最好的是怀化市的新晃自治县，AQI 仅为 29。

总结

通过将空气质量数据与地理空间信息相结合，我们构建了一个动态、交互的空气质量展示平台。用户可以在地图上清晰看到各地的空气质量等级，色彩鲜明的分区标识让污染状况一目了然。平台支持缩放地图、切换时间尺度及查询特定区域数据，这种高度的交互性有助于用户更好地理解环境状况。