在现代应用开发中,WebGIS(Web Geographic Information System)技术越来越受到关注,尤其是在城市规划、旅游、环境监测等领域。本文将介绍如何基于Spring Boot构建一个全国风景区WebGIS,并按省级展示风景区的实践。

项目概述

我们的目标是开发一个简单的WebGIS系统,能够展示中国各省的风景区信息。用户可以在地图上选择省份,查看该省的风景区列表及其详细信息。

技术栈

  • 后端:Spring Boot
  • 前端:HTML、CSS、JavaScript、Leaflet.js(地图框架)
  • 数据库:MySQL

数据库设计

首先,我们需要设计一张表来存储风景区的信息。以下是一个简单的数据库表设计示例:

CREATE TABLE scenic_spots (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    province VARCHAR(50) NOT NULL,
    description TEXT,
    latitude DECIMAL(10, 8),
    longitude DECIMAL(11, 8)
);

Spring Boot 项目结构

创建一个 Spring Boot 项目,并添加相关依赖:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

实体类

接下来,我们创建实体类 ScenicSpot

@Entity
public class ScenicSpot {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String province;
    private String description;
    private Double latitude;
    private Double longitude;

    // Getters and Setters
}

数据访问层

我们使用Spring Data JPA创建一个Repository:

public interface ScenicSpotRepository extends JpaRepository<ScenicSpot, Long> {
    List<ScenicSpot> findByProvince(String province);
}

服务层

接下来,需要创建一个服务层来处理业务逻辑:

@Service
public class ScenicSpotService {
    @Autowired
    private ScenicSpotRepository scenicSpotRepository;

    public List<ScenicSpot> getSpotsByProvince(String province) {
        return scenicSpotRepository.findByProvince(province);
    }
}

控制器

然后,我们需要创建一个控制器来处理HTTP请求:

@RestController
@RequestMapping("/api/scenic-spots")
public class ScenicSpotController {
    @Autowired
    private ScenicSpotService scenicSpotService;

    @GetMapping("/{province}")
    public List<ScenicSpot> getSpotsByProvince(@PathVariable String province) {
        return scenicSpotService.getSpotsByProvince(province);
    }
}

前端实现

前端使用HTML和JavaScript展示地图和风景区信息。使用Leaflet.js展示地图:

<!DOCTYPE html>
<html>
<head>
    <title>全国风景区</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>
    <div id="map" style="height: 600px;"></div>
    <script>
        var map = L.map('map').setView([35.000, 105.000], 4);
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
        }).addTo(map);

        // 选择省份后请求风景区数据
        var province = "江苏"; // 示例省份
        fetch(`/api/scenic-spots/${province}`)
            .then(response => response.json())
            .then(data => {
                data.forEach(spot => {
                    L.marker([spot.latitude, spot.longitude]).addTo(map)
                        .bindPopup(spot.name);
                });
            });
    </script>
</body>
</html>

总结

通过以上步骤,我们构建了一个基于Spring Boot的全国风景区WebGIS应用。用户可以选择省份,动态加载并查看该省的风景区信息。这只是一个简单的实现,未来可以扩展更多功能,如更复杂的搜索、筛选条件、用户反馈等。这种WebGIS系统将为用户提供直观、生动的地理信息展示。

点赞(0) 打赏

微信小程序

微信扫一扫体验

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部