空气质量地图：借助百度天气接口和 Leaflet 进行 WebGIS 可视化

Leaflet 前端集成

拿到数据后，前端用 Leaflet 渲染。先定义好 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:"褐红色"}
];

根据数值返回颜色的方法很简单：

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"; }
}

图例需要支持温度和 AQI 两种模式的切换，所以封装了一个初始化函数，按类型选择颜色列表和色阶范围。

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

核心的展示方法 previewAQI 通过 Ajax 请求后端接口，拿到省份下所有区县的 AQI、坐标和 GeoJSON，动态添加上色面图层和标注点，点击可以查看详情。

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

这样，整个省的可视化就渲染出来了。

实际效果

10 月 12 日那天的画面很清楚：湘东北一片红紫，湘西和郴州碧绿。

放大看长沙周边，株洲、湘潭、宁乡、岳阳都是橙色或红色，浏阳 AQI 到了 230。

区域质量好的地方也不是没有。湘西北的龙山、花垣、桑植等县都是优，郴州的汝城、桂东也一片绿。

从数据上看，污染最重的前十区县几乎被长株潭包揽，浏阳和醴陵都是 238。

而空气质量最好的区县里，怀化新晃的 AQI 只有 29，郴州北湖、桂东、苏仙区也都在 40 以下。

这种可视化的好处是，一眼就能看出污染团的聚集范围和扩散趋势。如果再结合风速风向数据，做个简单的预测也不是什么难事。整个方案用到的技术栈都是现成的，百度接口免费易用，Leaflet 轻量灵活，适合快速出活儿。