基于 Leaflet 的 WebGIS 省域区县天气可视化实现

二、天气数据简介

天气变化的复杂性和不确定性使得准确获取天气信息具有挑战性。这里的天气信息数据源以百度天气为例，通过查询获取区域内的天气信息。

1、省域天气数据获取

核心 Java 代码如下，用于批量处理省级数据并采集不同区县的天气信息：

/** * - 批量处理省级数据 * @throws InterruptedException */ 
@Test 
public void bdWeather2PGWithProvince() throws InterruptedException { 
    String provinceCode = "430000"; 
    Random random = new Random(); 
    QueryWrapper<Area> queryWrapper = new QueryWrapper<Area>(); 
    queryWrapper.like("province_code", provinceCode); 
    List<Area> areaList = areaService.list(queryWrapper); 
    if(StringUtils.isNotEmpty(areaList)) { 
        for (Area area : areaList) { 
            String areaCode = area.getAreaCode(); 
            HttpResponse<String> result = baiduWeatherApiService.getWeather(areaCode, DATA_TYPE); 
            Gson gson = new Gson(); 
            BdWeatherDTO bdWeatherInfo = gson.fromJson(result.getBodyResult(), BdWeatherDTO.class); 
            WeatherInfoDTO bdResult = bdWeatherInfo.getResult(); 
            //将天气信息持久化到数据库中 
            if(null != bdResult) { 
                Long weatherId = IdWorker.getId(); 
                bdResult.getWeatherNow().setPkId(weatherId); 
                bdResult.getWeatherNow().setLocationCode(areaCode); 
                weatherService.insertWeatherInfo(bdResult); 
            } 
            Thread.sleep(1500 + random.nextInt(1000)); 
        } 
    } 
}

运行以上代码即可实现省域区县天气的入库处理。

2、区县名称不一致

由于区县信息和城市信息的采集整理可能存在不一致的情况（如行政区划调整），例如望城县改为望城区。为保证查询能关联查到，需要将两张表的数据进行清理统一，修改成统一的名称即可。

三、SpringBoot 后台实现

本文采用 SpringBoot 框架为 WebGIS 提供后台服务，主要涉及天气数据查询的实现。

1、Java 后台天气数据查询

使用 Java 进行区县天气数据查询，基于 MybatisPlus 定义数据视图对象：

package com.yelang.project.meteorology.mapper; 
import java.util.List; 
import org.apache.ibatis.annotations.Param; 
import org.apache.ibatis.annotations.Select; 
import com.baomidou.mybatisplus.core.mapper.BaseMapper; 
import com.yelang.project.meteorology.domain.AreaWeatherVO; 
import com.yelang.project.meteorology.domain.WeatherNow; 

public interface WeatherNowMapper extends BaseMapper<WeatherNow>{ 
    final static String GET_WEATHER_BYPROVINCE_ANDDAY = "<script>" + 
        " 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' ) = #{day} AND T.province_code = #{provinceCode} " + 
        " 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 " + 
        "</script>"; 

    /** * - 根据省份和日期查询区县城市天气视图对象列表 * @return */ 
    @Select(GET_WEATHER_BYPROVINCE_ANDDAY) 
    List<AreaWeatherVO> getWeatherByProvinceAndday(@Param("provinceCode") String provinceCode,@Param("day") String day); 
}

业务逻辑层较为简单。

2、控制层实现

控制层接收前端请求并返回响应数据，提供展示界面的跳转及区县天气数据列表获取：

package com.yelang.project.meteorology.controller; 
import java.util.List; 
import org.apache.shiro.authz.annotation.RequiresPermissions; 
import org.springframework.beans.factory.annotation.Autowired; 
import org.springframework.stereotype.Controller; 
import org.springframework.web.bind.annotation.GetMapping; 
import org.springframework.web.bind.annotation.PathVariable; 
import org.springframework.web.bind.annotation.RequestMapping; 
import org.springframework.web.bind.annotation.ResponseBody; 
import com.yelang.framework.web.controller.BaseController; 
import com.yelang.framework.web.domain.AjaxResult; 
import com.yelang.project.meteorology.domain.AreaWeatherVO; 
import com.yelang.project.meteorology.service.IWeatherNowService; 

@Controller 
@RequestMapping("/met/province/weather") 
public class ProvinceWeatherController extends BaseController{ 
    private String prefix = "meteorology/weather"; 
    @Autowired 
    private IWeatherNowService weatherNowService; 

    @RequiresPermissions("met:province:weather:map") 
    @GetMapping("/province") 
    public String province(){ 
        return prefix + "/province"; 
    } 

    @RequiresPermissions("met:province:weather:list") 
    @GetMapping("/list/{pcode}") 
    @ResponseBody 
    public AjaxResult ewsnProvinceList(@PathVariable("pcode") String pcode){ 
        String day = "2025-08-17"; 
        List<AreaWeatherVO> dataList = weatherNowService.getWeatherByProvinceAndday(pcode,day); 
        return AjaxResult.success().put("data", dataList); 
    } 
}

四、WebGIS 前端实现

Leaflet 凭借其轻量级、易上手、功能强大等特点成为地理信息可视化项目的首选工具之一。

1、气温颜色及图例初始化

为了直观展示气温信息，首先对气温的值、颜色、描述等信息进行定义。以下是一个详细的气温颜色色带表格：

在 JavaScript 中定义以上信息：

//气温及颜色配置 
var weatherColorList = [ 
    {name:"-20℃ - -15℃",color:"#000000",rgb:new Color(0,0,0),colorDesc:"黑色"}, 
    {name:"-15℃ - -10℃",color:"#4B0082",rgb:new Color(75,0,130),colorDesc:"深紫色"}, 
    {name:"-10℃ - -5℃",color:"#800080",rgb:new Color(128,0,128),colorDesc:"紫色"}, 
    {name:"-5℃ - 0℃",color:"#4169E1",rgb:new Color(65,105,225),colorDesc:"深蓝色"}, 
    {name:"0℃ - 5℃",color:"#0000FF",rgb:new Color(0,0,255),colorDesc:"蓝色"}, 
    {name:"5℃ - 10℃",color:"#ADD8E6",rgb:new Color(173,216,230),colorDesc:"浅蓝色"}, 
    {name:"10℃ - 15℃",color:"#00FFFF",rgb:new Color(0,255,255),colorDesc:"青色"}, 
    {name:"15℃ - 20℃",color:"#00FF00",rgb:new Color(0,255,0),colorDesc:"绿色"}, 
    {name:"20℃ - 25℃",color:"#90EE90",rgb:new Color(144,238,144),colorDesc:"浅绿色"}, 
    {name:"25℃ - 30℃",color:"#FFFF00",rgb:new Color(255,255,0),colorDesc:"黄色"}, 
    {name:"30℃ - 35℃",color:"#FFA500",rgb:new Color(255,165,0),colorDesc:"橙色"}, 
    {name:"35℃ - 40℃",color:"#FF4500",rgb:new Color(255,69,0),colorDesc:"橙红色"}, 
    {name:"40℃ - 45℃",color:"#FF0000",rgb:new Color(255,0,0),colorDesc:"红色"}, 
    {name:"45℃以上",color:"#8B0000",rgb: new Color(139,0,0),colorDesc:"深红色"} 
];

在 WebGIS 中使用色带方式对气温颜色进行定义，并在地图中展示相应的图例：

var DIY_BLUE_GREEN_YELLOW_RED_SCHEME; 
$(document).ready(function () { 
    initSidebar(); 
    var legendData = new Array(); 
    var colorArray = new Array(); 
    for(var i=0;i<weatherColorList.length;i++){ 
        var _tempData = weatherColorList[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); 
    DIY_BLUE_GREEN_YELLOW_RED_SCHEME = new MultiColorScheme('', -20,45 ,colorArray); 
    initLegend(legendData); 
});

2、气温数据展示实现

考虑到区县数量较多，为避免中文标签被遮挡，采用碰撞检测组件辅助提升可视化效果：

var collisionLayer = L.LayerGroup.collision({margin:2});

实现气温数据展示的关键代码如下：

function previewWeather(pid,provinceCode,name){ 
    previewProvince(pid,name); 
    $.ajax({ 
        type:"get", 
        url:ctx + "/met/province/weather/list/" + provinceCode, 
        data:{}, 
        dataType:"json", 
        cache:false, 
        processData:false, 
        success:function(result){ 
            if(result.code == web_status.SUCCESS){ 
                $("#title_info").html(name+"天气实况<sub>更新时间:20250817" +"</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 = makeColor(areaData.temp,-20,45,DIY_BLUE_GREEN_YELLOW_RED_SCHEME); 
                        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) }); 
                        showLayerGroup.addLayer(areaLayer); 
                        //中心点位 
                        L.marker([areaData.lat, areaData.lon], { icon: myIcon}).addTo(collisionLayer); 
                        collisionLayer.addTo(showLayerGroup); 
                    } 
                } 
            } 
        }, 
        error:function(){ 
            $.modal.alertWarning("获取空间信息失败"); 
        } 
    }); 
}

五、成果展示

本节描述 WebGIS 的区县天气展示，以湖南省和西藏自治区两个地区为例。

1、湖南省天气展示

从整体来看，湖南 8 月 17 日 8 点左右的全省气温信息比之前的要好多了（整体范围从 20 度到 29 度）。低温前 5 区县包括桂东县、南岳区等；高温前 5 区县包括岳阳楼区、云溪区等。

2、西藏自治区天气展示

从整体来看，西藏自治区 8 月 17 日 8 点左右的全省气温信还是比较低（整体范围从 2 度到 21 度）。低温前 5 区县包括嘉黎县、错那县等；高温前 5 区县包括墨脱县、朗县等。林芝市的气温较高，被称为西藏江南。

六、总结

本文介绍了基于 Leaflet 和 WebGIS 技术实现天气可视化的完整流程和关键技巧。通过阅读，读者能够对基于 Leaflet 的省域区县天气可视化有全面而深入的了解，并掌握实现这一目标的具体方法和技巧。