用 Leaflet 和百度天气接口展示湖南省空气质量

然后用一个简单的函数根据 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"; }
}

实际加载数据的时候，还需要考虑图例切换——因为系统同时支持温度和 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 方法来拉取数据、添加 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("获取空间信息失败");
        }
    });
}

完成以上代码后，就能在 Leaflet 地图上看到彩色的空气质量分布了。

下图是当天湖南省的整体情况，可以明显看出三大块：湘东北长沙、株洲一带深红色，污染严重；湘中、湘南黄色到橙色，多为轻度到中度；而湘西和湘西北以及郴州部分地区呈现绿色，空气质量优。

把湘东北放大，更能看清重度污染区域。长沙、浏阳、宁乡、岳麓、望城等区县 AQI 都超过了 200，株洲的醴陵、天元区也有 238。

反观湘西北，龙山县、花垣县、永顺县等地一片绿色，AQI 低至 30 左右。

郴州的汝城、桂东等地方也达到了优。

将当天数据排序，得到了污染最严重的前十区县：

空气质量最好的十个区县则是：

从这个案例能看出，结合百度天气接口和 WebGIS，可以快速搭建空气质量的空间化视图。整个流程不复杂，关键是后端把 AQI 和空间数据关联好，前端再做一次颜色映射和交互切换。如果需要展示温度或其他气象要素，同样只要在 initLegendAndColor 里切换数据源和色带就行。