用 WebGIS 和百度天气做一个复古天气预报页

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

Controller 再把这个能力暴露给前端即可。

二、接入百度天气接口

拿到省会城市的经纬度之后，就可以按坐标去查天气。百度天气接口支持经纬度查询，返回当前天气和未来预报，正好够做一个'今日 + 明日'的展示。

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

测试代码里，遍历省会城市列表，逐个请求天气。这里特意加了随机等待，主要是为了避免请求过密，这种场景里稳一点比跑得快更重要：

@Test
public void testGetProvinceWeather() throws InterruptedException {
    Random random = new Random();
    List<LinkedHashMap<String, Object>> provinceWeatherData = new ArrayList<>();
    List<ProvinceAbbreviationsVo> provinceList = geographicNameService.findProvinceAbbreviations();
    Gson gson = new Gson();
    for (ProvinceAbbreviationsVo vo : provinceList) {
        String location = vo.getCityLon() + "," + vo.getCityLat();
        HttpResponse<String> result = baiduWeatherApiService.getByLocation(location, DATA_TYPE, "wgs84");
        if (StringUtils.isNotEmpty(result.getBodyResult())) {
            LinkedHashMap<String, Object> map = new LinkedHashMap<>();
            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. 响应对象

最后整理出来的数据结构比较简单，前端直接吃这个 JSON 就行：

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

3. 省会天气数据展示

以 12 月 7 日为例，整理出来的数据如下：

[
  {"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"},
  {"lat":"38.041795673","lon":"114.509022491","city":"石家庄市","w_name":"晴","temp":"0-15","two":"12-8 -2-7"},
  {"lat":"37.8699777370001","lon":"112.543459413","city":"太原市","w_name":"晴","temp":"-8-9","two":"12-8 -7-6"},
  {"lat":"40.84174369","lon":"111.742890453","city":"呼和浩特市","w_name":"多云","temp":"-14--1","two":"12-8 -10-0"},
  {"lat":"41.8043596680001","lon":"123.425789521","city":"沈阳市","w_name":"晴","temp":"-8-5","two":"12-8 -7-1"},
  {"lat":"43.8149938920001","lon":"125.31766745","city":"长春市","w_name":"晴","temp":"-12-0","two":"12-8 -11--4"},
  {"lat":"45.8019539320001","lon":"126.528652017","city":"哈尔滨市","w_name":"多云","temp":"-18--5","two":"12-8 -21--8"},
  {"lat":"31.2318491390001","lon":"121.46965015","city":"上海市","w_name":"霾","temp":"10-20","two":"12-8 7-16"},
  {"lat":"32.06249645","lon":"118.792223921","city":"南京市","w_name":"晴","temp":"6-19","two":"12-8 4-15"},
  {"lat":"30.276062563","lon":"120.15030306","city":"杭州市","w_name":"晴","temp":"9-19","two":"12-8 7-17"},
  {"lat":"31.823360144","lon":"117.222184326","city":"合肥市","w_name":"晴","temp":"3-18","two":"12-8 1-14"},
  {"lat":"26.0772329970001","lon":"119.291018877","city":"福州市","w_name":"多云","temp":"14-24","two":"12-8 14-23"},
  {"lat":"28.6855336350001","lon":"115.853297824","city":"南昌市","w_name":"多云","temp":"11-20","two":"12-8 10-19"},
  {"lat":"36.6655797230001","lon":"116.988607998","city":"济南市","w_name":"晴","temp":"-1-15","two":"12-8 5-10"},
  {"lat":"34.7474463120001","lon":"113.620086008","city":"郑州市","w_name":"晴","temp":"1-18","two":"12-8 0-11"},
  {"lat":"30.5951977820001","lon":"114.299439726","city":"武汉市","w_name":"雾","temp":"3-18","two":"12-8 3-17"},
  {"lat":"28.230799873","lon":"112.934511917","city":"长沙市","w_name":"霾","temp":"8-18","two":"12-8 7-17"},
  {"lat":"23.1306783370001","lon":"113.259864444","city":"广州市","w_name":"多云","temp":"14-25","two":"12-8 13-25"},
  {"lat":"22.819317503","lon":"108.362490315","city":"南宁市","w_name":"多云","temp":"15-23","two":"12-8 14-24"},
  {"lat":"20.050034829","lon":"110.196179915","city":"海口市","w_name":"晴","temp":"18-25","two":"12-8 19-25"},
  {"lat":"29.566484528","lon":"106.546994525","city":"重庆市","w_name":"晴","temp":"9-15","two":"12-8 11-17"},
  {"lat":"30.574891279","lon":"104.064316153","city":"成都市","w_name":"晴","temp":"6-18","two":"12-8 8-13"},
  {"lat":"26.6496315200001","lon":"106.626281501","city":"贵阳市","w_name":"多云","temp":"4-12","two":"12-8 7-15"},
  {"lat":"24.88255573","lon":"102.830594244","city":"昆明市","w_name":"多云","temp":"4-16","two":"12-8 6-17"},
  {"lat":"29.6558675410001","lon":"91.1700828420001","city":"拉萨市","w_name":"晴","temp":"-5-13","two":"12-8 -4-12"},
  {"lat":"34.3431558230001","lon":"108.935725754","city":"西安市","w_name":"晴","temp":"2-14","two":"12-8 2-13"},
  {"lat":"36.0614637570001","lon":"103.831432958","city":"兰州市","w_name":"晴","temp":"-6-7","two":"12-8 -5-8"},
  {"lat":"36.6168144980001","lon":"101.775387587","city":"西宁市","w_name":"晴","temp":"-10-6","two":"12-8 -7-6"},
  {"lat":"38.4870919210001","lon":"106.226758099","city":"银川市","w_name":"多云","temp":"-3-6","two":"12-8 -5-8"},
  {"lat":"43.8255140370001","lon":"87.6149638000001","city":"乌鲁木齐市","w_name":"大雾","temp":"-6-1","two":"12-8 -7--1"},
  {"lat":"25.036365684","lon":"121.563739724","city":"台北市","w_name":"多云","temp":"17-23","two":"12-8 18-21"}
]

三、WebGIS 页面构建

页面这部分没有走特别复杂的框架，思路很简单：先把天气点位渲染到地图上，再做一个轮播，让页面自己动起来。配上背景音乐，气氛就出来了。

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); // 5000 毫秒（5 秒）后执行
};

2. 城市标记和天气展示

Leaflet 负责把省会城市标到地图上。这里用了碰撞处理，避免点位太密时标签互相遮挡：

function initWeather(){
  var collisionLayer = L.LayerGroup.collision({margin:3});
  for(var i=0; i<dataJson.length; i++){
    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(){
  const intervalId = setInterval(() => {
    if (currentIndex >= dataJson.length) {
      currentIndex = 0;
    }
    const currentElement = dataJson[currentIndex];
    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);
    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. 页面效果

走完这些步骤，页面就有了一个能播放背景音乐、能显示省会城市天气、还能自动轮播城市的天气小应用。功能不复杂，但整体氛围比较完整，和'复古天气预报'这个主题是对得上的。

四、结语

这套实现的关键不在于炫技，而在于把几类数据串顺：数据库里拿城市地理信息，百度天气接口补实时天气，Leaflet 负责地图展示，最后用轮播和音乐把页面情绪拉起来。它更像一个带有主题表达的 WebGIS 小项目，不是标准天气产品，但作为演示很够用。后面如果继续做，最值得补的是交互细节和数据更新策略，尤其是天气接口调用频率和前端展示节奏，别让'复古感'变成'卡顿感'。