基于SpringBoot和Leaflet的全国省会城市风景区分布分析实践
随着科技的发展和人们生活水平的提高，旅游业日益发展。各大城市尤其是省会城市的风景区吸引着成千上万的游客。为了更好地了解各省会城市的风景区分布情况，我们可以结合SpringBoot作为后端服务，Leaflet作为前端JS库进行可视化展示。在这篇文章中，我们将详细介绍如何构建这样一个应用，进行全国省会城市风景区的分布分析。
一、整体架构
我们的应用分为前端和后端两部分。后端使用SpringBoot提供RESTful API，前端使用HTML、CSS和JavaScript及Leaflet库展示地图和风景区信息。
二、后端实现
我们首先使用SpringBoot创建一个基本的RESTful API，提供全国省会城市及其风景区的数据。首先确保已经安装了Java和Maven，接下来创建一个新的Spring Boot项目。
- 引入相关依赖：
在pom.xml中加入Spring Web依赖：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>com.h2database</groupId>
<artifactId>h2</artifactId>
<scope>runtime</scope>
</dependency>
- 创建数据模型：
@Entity
public class ScenicSpot {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
private String cityName;
private String spotName;
private Double latitude;
private Double longitude;
// getters and setters
}
- 创建Repository：
public interface ScenicSpotRepository extends JpaRepository<ScenicSpot, Long> {
List<ScenicSpot> findByCityName(String cityName);
}
- 创建Controller：
@RestController
@RequestMapping("/api/scenicspots")
public class ScenicSpotController {
@Autowired
private ScenicSpotRepository scenicSpotRepository;
@GetMapping
public List<ScenicSpot> getAllScenicSpots() {
return scenicSpotRepository.findAll();
}
}
- 数据库初始化：
在
resources/data.sql中插入一些省会城市风景区的示例数据。
INSERT INTO scenic_spot (city_name, spot_name, latitude, longitude) VALUES ('北京', '天安门', 39.9042, 116.4074);
INSERT INTO scenic_spot (city_name, spot_name, latitude, longitude) VALUES ('上海', '外滩', 31.2416, 121.4901);
三、前端实现
前端主要使用Leaflet库来展示地图和标记风景区的位置。
- HTML页面：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全国省会城市风景区分布</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
#map { height: 600px; }
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script>
const map = L.map('map').setView([35.0, 105.0], 5); // 设置地图中心为中国
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
}).addTo(map);
fetch('/api/scenicspots')
.then(response => response.json())
.then(data => {
data.forEach(spot => {
L.marker([spot.latitude, spot.longitude])
.addTo(map)
.bindPopup(spot.spotName + " (" + spot.cityName + ")");
});
});
</script>
</body>
</html>
- 访问网页：
启动Spring Boot应用后，访问
http://localhost:8080即可看到全国省会城市的风景区在地图上的分布。
四、总结
通过Spring Boot创建RESTful API和利用Leaflet库进行地图可视化，我们可以轻松展示全国省会城市风景区的分布。这个示例只是一个起点，后续我们还可以根据需求扩展更多功能，比如增加风景区详细信息、用户评论、筛选条件等。希望这篇文章能为大家搭建类似的应用提供帮助。
