Leaflet 基础语法：Spring Boot 支持下的省级旅游口号地图标注入门

最新推荐文章于 2025-12-05 00:01:18 发布

原创最新推荐文章于 2025-12-05 00:01:18 发布 · 414 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#spring boot #旅游 #后端

Leaflet 基础语法：Spring Boot 支持下的省级旅游口号地图标注入门

1. Leaflet 基础地图初始化

在 HTML 页面中创建地图容器并初始化：

<div id="chinaMap" style="height: 600px;"></div>

<script>
// 初始化地图
const map = L.map('chinaMap').setView([35.8617, 104.1954], 5); // 中国中心坐标

// 添加底图图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

2. 省级数据准备（Spring Boot 后端）

Spring Boot 实体类示例：

// Province.java
@Data
@Entity
public class Province {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;       // 省份名称
    private Double latitude;   // 纬度
    private Double longitude;  // 经度
    private String slogan;     // 旅游口号
}

API 控制器示例：

// MapController.java
@RestController
@RequestMapping("/api/provinces")
public class MapController {
    @Autowired
    private ProvinceRepository provinceRepository;

    @GetMapping
    public List<Province> getAllProvinces() {
        return provinceRepository.findAll();
    }
}

3. 前端标注实现

从 Spring Boot API 获取数据并标注：

// 获取省级数据
fetch('/api/provinces')
    .then(response => response.json())
    .then(provinces => {
        provinces.forEach(province => {
            // 创建自定义图标
            const customIcon = L.divIcon({
                className: 'slogan-icon',
                html: `<div class="slogan-label">${province.name}</div>`,
                iconSize: [100, 30]
            });

            // 添加标记
            L.marker([province.latitude, province.longitude], {icon: customIcon})
                .addTo(map)
                .bindPopup(`
                    <b>${province.name}</b><br>
                    ${province.slogan}
                `);
        });
    });

4. CSS 样式优化

.slogan-icon {
    background: rgba(255, 215, 0, 0.7);
    border-radius: 4px;
    padding: 3px 8px;
    border: 1px solid #d4af37;
    text-align: center;
    font-weight: bold;
}

.slogan-label {
    color: #8b0000;
    font-size: 14px;
    text-shadow: 1px 1px 2px white;
}

5. 效果示例

省份	坐标	旅游口号
云南	[25.0433, 102.7066]	七彩云南，旅游天堂
四川	[30.5728, 104.0668]	天府之国，安逸四川
浙江	[30.2741, 120.1551]	诗画江南，山水浙江

6. 高级功能扩展

// 添加省级边界图层
fetch('geojson/china-provinces.json')
    .then(res => res.json())
    .then(data => {
        L.geoJSON(data, {
            style: { color: '#3388ff', weight: 1 },
            onEachFeature: (feature, layer) => {
                layer.bindPopup(feature.properties.name);
            }
        }).addTo(map);
    });

// 添加热力图
const heatPoints = provinces.map(p => [p.latitude, p.longitude, 0.8]);
L.heatLayer(heatPoints, { radius: 25 }).addTo(map);

关键知识点

坐标系统：使用 WGS84 坐标系（EPSG:4326）
图层叠加：基础图层 + 标记层 + 边界层

响应式设计：添加地图重绘监听

window.addEventListener('resize', () => map.invalidateSize());

性能优化：使用 MarkerCluster 处理大量标注点

const markerCluster = L.markerClusterGroup();
provinces.forEach(p => markerCluster.addLayer(createMarker(p)));
map.addLayer(markerCluster);

最佳实践：省级坐标建议使用省会城市坐标，可通过国家地理信息公共服务平台获取精准经纬度数据。