基于 WebGIS 与百度天气接口构建复古天气预报系统

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

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

调用实例代码如下：

@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、响应对象属性介绍

示例响应对象：

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

3、省会天气实况展示

程序查询出的省会城市天气预报数据示例（部分）：

[
  {"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');
video.volume = 0.2;
var button = document.getElementById('playButton');
window.onload = function() {
  initWeather();
  setTimeout(function() {
    video.play();
    video.muted = false;
    preview();
  }, 5000);
};

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、成果展示

经过以上步骤，实现了带音乐播放的天气小应用，页面效果包含地图标记、天气信息及轮播功能。