基于百度天气 API 与 Leaflet 的 WebGIS 天气预报系统构建

当然，为了方便方法的复用，这里我们将 Mapper 的查询能力封装成一个通用的方法，在 Service 中进行实现，通过提供对外方法，供第三方服务进行调用。Service 的调用比较简单，代码如下：

@Override
public List<ProvinceAbbreviationsVo> findProvinceAbbreviations() {
    return this.baseMapper.findProvinceAbbreviations();
}

最后实现一个 Controller 来将 Service 的服务接口对外提供出来。

二、Java 省会城市天气查询

有了这个查询省会天气的服务之后，接下来我们就可以根据不同省会城市的经纬度，利用百度天气接口的国内经纬度查询能力，直接返回对应城市的天气以及未来的天气预报。本节就来深入介绍一下如何使用经纬度来进行查询天气，并且对相应对象的属性进行一个简单的介绍。

1、与百度开放平台集成天气

为了实现根据省会城市的经纬度来查询所在城市的天气信息，首先我们需要定义百度天气接口的方法，定义方法如下：

/**
 * - 根据经纬度和坐标类型查询指定地点的天气信息
 * @param location 经纬度，经度在前纬度在后，逗号分隔。支持类型：bd09mc/bd09ll/wgs84/gcj02
 * @param data_type 请求数据类型。数据类型有：now/fc/index/alert/fc_hour/all，控制返回内容，默认值无
 * @param coordtype 支持类型:wgs84/bd09ll/bd09mc/gcj02 默认值：wgs84
 * @return
 */
@GetHttpInterface("/")
public HttpResponse<String> getByLocation(@QueryPar("location") String location, @QueryPar("data_type") String data_type, @QueryPar("coordtype") String coordtype);

有了这个接口之后，接下来我们就可以从前面获取的省会城市列表中来进行循环调用，传入省会城市的经纬度位置就可以实现天气情况的查询。调用实例代码如下：

/**
 * 获取省会城市天气预报信息
 * @throws InterruptedException
 */
@Test
public void testGetProvinceWeather() throws InterruptedException {
    Random random = new Random();
    List<LinkedHashMap<String, Object>> provinceWeatherData = new ArrayList<LinkedHashMap<String,Object>>(34);
    List<ProvinceAbbreviationsVo> provinceList = geographicNameService.findProvinceAbbreviations();
    Gson gson = new Gson();
    for (ProvinceAbbreviationsVo vo : provinceList) {
        //经纬度，经度在前纬度在后，逗号分隔。
        String location = vo.getCityLon() + "," + vo.getCityLat();
        //lat:39.066114,lon:117.213135,w_name:"晴",city:"天津",temp:"3-14",color:"#03a9f4",two:"11/22 3-12"
        HttpResponse<String> result = baiduWeatherApiService.getByLocation(location, DATA_TYPE, "wgs84");
        if(StringUtils.isNotEmpty(result.getBodyResult())) {
            LinkedHashMap<String, Object> map = new LinkedHashMap<String, Object>();
            map.put("lat", vo.getCityLat());
            map.put("lon", vo.getCityLon());
            map.put("city", vo.getCityName());
            BdWeatherDTO bdWeatherInfo = gson.fromJson(result.getBodyResult(), BdWeatherDTO.class);
            WeatherInfoDTO weatherInfoDTO = bdWeatherInfo.getResult();
            map.put("w_name", weatherInfoDTO.getWeatherNow().getText());
            List<WeatherForecasts> forecasts =weatherInfoDTO.getForecasts();
            if(StringUtils.isNotEmpty(forecasts)) {
                WeatherForecasts today = forecasts.get(0);
                map.put("temp", today.getLow() + "-" + today.getHigh());
                WeatherForecasts tomorrow = forecasts.get(1);
                Date tempDate = tomorrow.getDate();
                String two = (tempDate.getMonth() + 1) + "-" + tempDate.getDate() + " "+ tomorrow.getLow() + "-" + tomorrow.getHigh();
                map.put("two", two);
            }
            provinceWeatherData.add(map);
        }
        Thread.sleep(1500 + random.nextInt(1000));
    }
    String weatherStr = gson.toJson(provinceWeatherData);
    System.out.println(provinceWeatherData);
    System.out.println(weatherStr);
}

需要说明的是，这里采用线程休眠的原因是为了避免造成并发调用。当然，如果您的账号权限比较高，不受并发的限制就无所谓了。

2、响应对象属性介绍

为了方便标注，实现省会城市的实时天气信息展示以及未来一天的天气情况展示，需要定义一个标准的响应对象，通过上述代码可以看出我们使用一个 hashmap 来进行实现。示例如下：

{
 "lat":"39.903162481",
 "lon":"116.401006456",
 "city":"北京市",
 "w_name":"晴",
 "temp":"-2-10",
 "two":"12-8 -4-5"
}

3、省会天气实况展示

这里以 12 月 7 日为例，使用上述程序查询出来 12 月 7 日到 12 月 8 日两天的省会城市天气预报数据如下：

[{"lat":"39.903162481","lon":"116.401006456","city":"北京市","w_name":"晴","temp":"-2-10","two":"12-8 -4-5"}, {"lat":"39.083383854","lon":"117.193764008","city":"天津市","w_name":"晴","temp":"-2-11","two":"12-8 -2-5"}, ... ]

三、WebGIS 应用构建

本节将重点介绍如何在 WebGIS 中进行应用的构建，在使用百度天气创建好相应的省会城市列表的天气信息后，接下来要做的就是要集成经典的天气预报北京音乐，同时使用 Leaflet 来标注所有的省会城市位置，并且要展示天气信息，最后要根据位置来实现城市的轮播展示。

1、背景音乐集成

背景音乐这里我们找了一个很经典的，是我们小时候百听不厌的背景音乐。当然，大家也可以根据自己的喜好来调整。在 html 中增加一个在线视频，然后需要我们隐藏画面，只保留音乐，核心代码如下：

<!-- 视频标签，设置为循环播放，但初始时不自动播放 -->
<video loop muted>
 <source src="./weather/music.mp4" type="video/mp4">
 您的浏览器不支持 HTML5 视频。
</video>

为了隐藏画面，这里我们使用 CSS 样式的方式进行控制，代码如下：

/* 隐藏视频画面 */
video { display: none; }

为了演示的效果，我们将设置网页进行延迟播放，设置方法如下：

// 获取视频元素和按钮
var video = document.getElementById('backgroundVideo');
// 设置音量为 20%
video.volume = 0.2;
var button = document.getElementById('playButton');
// 页面加载后延迟 2 秒自动播放
window.onload = function() {
    initWeather();
    setTimeout(function() {
        video.play(); // 开始播放
        video.muted = false; // 取消静音
        preview();//城市天气进行轮播
    }, 5000); // 2000 毫秒（2 秒）后执行
};

2、城市标记及天气展示

城市标记及天气展示比较简单，使用 Leaflet 来进行位置的标注即可，这里给出示例代码：

function initWeather(){
    var collisionLayer = L.LayerGroup.collision({margin:3});
    for(var i=0;i<dataJson.length;i++){
        var html;
        var marker = L.marker([dataJson[i].lat, dataJson[i].lon], { icon: L.divIcon({ iconSize: null, className: '', popupAnchor:[5,5], shadowAnchor:[5,5], html: buildHtml(dataJson[i],i) }) }).addTo(collisionLayer);
    }
    collisionLayer.addTo(map);
}

天气的信息标注代码如下，通过以上代码就可以实现今日天气和明日天气的网页展示：

function buildHtml(dataJson,index){
    var html = '';
    html += "<div style='color:"+getRandomColor()+"' class='animation-spaceInDown'><div ><b>"+dataJson.city + "&nbsp;" + dataJson.w_name + "&nbsp;"+ dataJson.temp +"℃</b><span></span></div>";
    html += "<div>" + ""+ dataJson.two+ " ℃</div>";
    html += "</div>";
    return html;
}

最后还有一个随机颜色的生成，使用随机颜色是为了保证生成的页面的颜色能够更加区别明显。

function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

3、城市轮播

为了实现每个省会城市都可以进行轮播，这里我们根据位置将地图的视图中心点进行重绘。最终的效果看起来就是一个会跳动的地图。这里我们使用定时器的方式来进行切换不同城市。核心代码如下：

function preview(){
    // 设置定时器，每隔 2 秒执行一次
    const intervalId = setInterval(() => {
        // 如果索引超出了数组范围，清除定时器并停止执行
        if (currentIndex >= dataJson.length) {
            currentIndex = 0;
        }
        // 获取当前索引对应的元素
        const currentElement = dataJson[currentIndex];
        //如果不为空，先移除 marker
        if(dymicMarker != null){
            map.removeLayer(dymicMarker);
        }
        dymicMarker = L.marker([currentElement.lat, currentElement.lon]).addTo(map);
        setTargetSelect(dymicMarker);
        console.log(`当前元素：${currentElement}`);
        map.setView([currentElement.lat, currentElement.lon],8);
        // 索引加 1，准备获取下一个元素
        currentIndex++;
    }, 3000);
}
function setTargetSelect(e){
    var i = 1
    var int = setInterval(() => {
        if(!e._map) clearInterval(int)
        if (i < -1) { i = 1 }
        i = i - 0.08
        if (i < 0) e.setOpacity(i * -1)
        else e.setOpacity(i)
    },60)
}

4、成果展示

经过以上的步骤，基本就可以实现带音乐播放的天气小应用。页面效果如下：

四、总结

以上就是本文的主要内容，本文构建了一个能够唤醒 80 年代记忆的老式天气预报系统。这不仅仅是一个技术项目，更是一次情感的探索和文化的传承。通过构建这样一个 80 年代风格的天气预报系统，我们希望能够唤起更多人对那个时代的美好回忆，同时也展示现代技术在文化传承方面的巨大潜力。在未来的工作中，我们还将继续优化系统功能，增加更多互动元素，如用户自定义播报内容、分享功能等，让这个系统不仅仅是一个展示平台，更是一个能够与用户产生情感共鸣的互动空间。这是一次穿越时空的构建之旅，也是一次对过去的致敬和对未来的探索。让我们一起踏上这段旅程，用现代的技术手段，唤醒那些沉睡在记忆深处的 80 年代天气预报，让旧时光在新技术的助力下重新焕发生机。