✅ 项目目标

使用 Spring Boot 提供 REST 后端服务，结合 Leaflet.js 前端地图框架，在地图上可视化展示：

  • 中国各省边界（GeoJSON 数据）
  • 每个省的中文简称（如“粤”、“沪”、“京”）
  • 鼠标悬停高亮、点击显示详细信息

🧱 技术栈

层技术
前端Leaflet.js + HTML/JS + Axios
后端Spring Boot（Spring Web + JSON 处理）
数据中国省级行政区 GeoJSON（推荐使用阿里、天地图、D3、DataV资源）

📦 项目结构概览

province-map/
├── src/
│   └── main/
│       ├── java/com/example/map/
│       │   ├── MapApplication.java
│       │   └── controller/ProvinceController.java
│       └── resources/
│           ├── static/index.html   <- Leaflet 页面
│           └── geo/provinces.json  <- 省级行政区 GeoJSON
└── pom.xml

💡 后端部分（Spring Boot）

1. Maven 依赖

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
</dependencies>

2. ProvinceController.java

@RestController
@RequestMapping("/api/provinces")
public class ProvinceController {

    @GetMapping("/geojson")
    public ResponseEntity<Resource> getProvincesGeoJson() throws IOException {
        ClassPathResource geoJson = new ClassPathResource("geo/provinces.json");
        return ResponseEntity.ok()
                .contentType(MediaType.APPLICATION_JSON)
                .body(geoJson);
    }
}

3. provinces.json 示例（GeoJSON + 简称属性）

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "广东省",
        "short": "粤"
      },
      "geometry": {
        "type": "Polygon",
        "coordinates": [ ... ]
      }
    },
    ...
  ]
}

你可以从这里获取 GeoJSON 模板数据：

🖼️ 前端部分（Leaflet + Axios）

1. index.html

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>中国省级地图</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map { height: 100vh; }
    .province-label {
      font-size: 12px;
      font-weight: bold;
      color: #d00;
    }
  </style>
</head>
<body>
  <div id="map"></div>

  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    const map = L.map('map').setView([35.8617, 104.1954], 4);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; OpenStreetMap contributors'
    }).addTo(map);

    axios.get('/api/provinces/geojson').then(res => {
      const geojson = res.data;

      L.geoJSON(geojson, {
        style: {
          color: "#3388ff",
          weight: 1,
          fillColor: "#a3c9f1",
          fillOpacity: 0.4
        },
        onEachFeature: function (feature, layer) {
          const name = feature.properties.name;
          const short = feature.properties.short;

          // 显示中文简称
          if (feature.geometry.type === "Polygon" || feature.geometry.type === "MultiPolygon") {
            const center = layer.getBounds().getCenter();
            L.marker(center, {
              icon: L.divIcon({
                className: 'province-label',
                html: short
              })
            }).addTo(map);
          }

          layer.on('mouseover', function () {
            layer.setStyle({ fillColor: '#f00', fillOpacity: 0.6 });
          });
          layer.on('mouseout', function () {
            layer.setStyle({ fillColor: '#a3c9f1', fillOpacity: 0.4 });
          });
          layer.bindPopup(`<b>${name}</b> (${short})`);
        }
      }).addTo(map);
    });
  </script>
</body>
</html>

✅ 可视化效果亮点

  • ✔ 地图上展示所有省份边界
  • ✔ 省份中心点显示中文简称
  • ✔ 鼠标悬停时变色高亮
  • ✔ 点击弹出详细信息（全名 + 简称）

🛠️ 可扩展功能建议

功能技术建议
展示城市级数据使用市级 GeoJSON，支持动态加载
支持缩放加载省级数据Leaflet GeoJSON 分级加载或热区加载
数据绑定支持按省绑定统计数据（人口、GDP 等）
Vue + Leaflet 更复杂页面使用 Vue + leaflet + echarts 组合展示
国际地图可扩展支持 world.geojson，多语言 label 支持