好的，基于 Spring Boot 和 Leaflet 构建一个区县当前天气的 WebGIS 项目是一个很好的实践。你可以通过这个项目来学习如何整合后端的天气数据服务，使用前端的地图展示技术，以及如何用 Spring Boot 创建一个高效的 Web 服务来支持前端交互。

我将详细说明一下如何构建这个系统的关键步骤：

1. 项目需求

  • 后端：使用 Spring Boot 开发一个 API 接口，提供天气数据（通过调用天气 API，如 OpenWeatherMap 或和风天气），并将数据传递给前端。
  • 前端：使用 Leaflet 实现地图展示功能，用户可以在地图上点击或选定区域，查看该区域的当前天气信息。

2. 系统架构

后端

  • Spring Boot 提供 API，用于接收前端请求，获取天气数据并返回。
  • 调用天气 API（例如 OpenWeatherMap API 或 和风天气 API）来获取当前天气数据。
  • 可能还需要提供接口，接受前端的经纬度或区域（如区县名称）来查询天气信息。

前端

  • 使用 Leaflet 库展示地图。
  • 地图上显示不同区县的区域，用户可以选择特定区域查看天气信息。
  • 前端通过 AJAX 请求后端 API，获取相应区域的天气数据，并在地图上显示天气信息。

3. 步骤详细说明

3.1. 后端开发（Spring Boot）

1. 创建 Spring Boot 项目

可以使用 Spring Initializr 来生成 Spring Boot 项目，依赖包括：

  • Spring Web：用于创建 REST API。
  • Spring Boot DevTools：提高开发效率（自动重启等）。
  • Lombok：简化 Java 代码。
2. 引入天气 API 客户端

可以使用天气 API（如 OpenWeatherMap 或和风天气 API）。例如，使用 OpenWeatherMap API：

  1. 访问 OpenWeatherMap 注册账号并获取 API 密钥。
  2. 使用 RestTemplate 或 Feign 客户端发送请求来获取天气数据。
@Service
public class WeatherService {

    private static final String API_KEY = "your_api_key";
    private static final String API_URL = "http://api.openweathermap.org/data/2.5/weather";

    public String getWeather(double latitude, double longitude) {
        String url = String.format("%s?lat=%f&lon=%f&appid=%s", API_URL, latitude, longitude, API_KEY);
        RestTemplate restTemplate = new RestTemplate();
        return restTemplate.getForObject(url, String.class);
    }
}
3. 创建天气查询接口
@RestController
@RequestMapping("/api/weather")
public class WeatherController {

    @Autowired
    private WeatherService weatherService;

    @GetMapping
    public ResponseEntity<String> getWeather(@RequestParam double lat, @RequestParam double lon) {
        String weatherData = weatherService.getWeather(lat, lon);
        return ResponseEntity.ok(weatherData);
    }
}

3.2. 前端开发（Leaflet + HTML + JavaScript）

1. 设置前端页面

在前端，你需要通过 Leaflet 显示地图，用户可以点击或选择一个区域。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气地图</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="map" style="height: 500px;"></div>
    <div id="weather-info"></div>

    <script>
        var map = L.map('map').setView([39.9042, 116.4074], 11); // 北京的经纬度

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

        map.on('click', function(e) {
            var lat = e.latlng.lat;
            var lon = e.latlng.lng;

            // 发起 AJAX 请求获取天气数据
            $.get(`/api/weather?lat=${lat}&lon=${lon}`, function(data) {
                // 假设返回的数据是 JSON 格式
                var weather = JSON.parse(data);
                var temp = weather.main.temp - 273.15; // 转换为摄氏度
                $('#weather-info').html(`当前位置：${lat}, ${lon}<br>温度：${temp.toFixed(2)}°C`);
            });
        });
    </script>
</body>
</html>
2. 获取天气信息并展示

在地图上点击任意位置时，前端通过 AJAX 向后端发送请求，获取该位置的天气数据，并在网页上展示出来。

3.3. 测试与优化

  1. 测试功能：确保点击地图时能够正确获取到天气数据。
  2. 用户交互优化：可以为天气数据展示增加更多信息，例如风速、湿度、天气描述等。
  3. 性能优化：缓存天气数据，以避免频繁调用外部 API。可以在后端实现一个缓存策略，减少对外部 API 的调用次数。

3.4. 部署

  1. 部署后端服务：将 Spring Boot 后端打包成 JAR 文件，并部署到服务器（如使用 AWS、阿里云等）。
  2. 部署前端：将前端 HTML 文件放在服务器上（可以和后端一起部署，或者单独部署在静态文件服务器上）。

4. 总结

这个项目的核心是结合 Spring Boot 后端和 Leaflet 前端实现天气服务的展示。通过地图和天气信息的结合，你不仅能够展示区域的当前天气，还可以在此基础上扩展更多的功能，如天气预报、历史数据查询等。你还可以在实现过程中掌握如何与外部 API 对接，如何通过地图技术展示信息，以及如何进行前后端交互。

这个实践项目可以帮助你掌握 Spring Boot 开发 RESTful API，Leaflet 地图应用的使用，以及如何把后端和前端的技术整合在一起，构建一个完整的 WebGIS 系统。

如果你有具体问题或需要进一步的代码实现，可以继续提问！