Leaflet地图实战：如何用GeoJSON数据打造个性化行政区划可视化-CSDN博客

Leaflet地图实战：用GeoJSON数据打造个性化行政区划可视化

你是否曾经面对着一张单调的地图，心里想着：“如果这些行政区划能根据数据变色，能交互，能讲故事，那该多好？” 对于WebGIS开发者来说，将静态的行政边界转化为动态、可交互、信息丰富的可视化界面，早已不是遥不可及的梦想。Leaflet，这个轻量级的JavaScript地图库，配合上结构清晰的GeoJSON数据，就能让你轻松实现这个目标。

我刚开始接触行政区划可视化时，也走过不少弯路。要么是数据格式不对，加载出来一片空白；要么是样式太丑，毫无美感可言；再或者就是交互逻辑混乱，用户点了几下就失去了兴趣。后来，经过多个项目的打磨，我逐渐摸索出了一套高效、美观且实用的工作流。今天，我就把这些实战经验分享给你，从数据获取、处理，到地图配置、样式定制，再到交互功能的深度实现，手把手带你打造出既专业又个性化的行政区划地图。

1. GeoJSON数据：行政区划可视化的基石

没有高质量的数据，再好的地图框架也是空中楼阁。GeoJSON作为一种基于JSON的地理空间数据交换格式，因其结构清晰、易于解析，成为了Web地图开发中的首选。它用FeatureCollection、Feature、Geometry等对象，精确地描述了点、线、面等地理要素。

1.1 数据获取的可靠渠道

寻找准确、更新及时的行政区划GeoJSON数据是第一步。国内有几个比较可靠的公开数据源：

阿里云DataV.GeoAtlas：这是我个人最常用的数据源之一。它提供了从国家到县级的中国行政区划GeoJSON数据，数据相对较新，且提供了多种下载格式。你可以直接通过其提供的API接口获取，也可以下载离线文件。
高德地图Web服务API：高德地图的“行政区域查询”接口可以直接返回行政区域的边界坐标。虽然返回的不是标准的GeoJSON格式，但可以很容易地转换为GeoJSON。这对于需要动态获取边界数据的场景非常有用。
开源社区项目：GitHub上有很多维护者会定期更新中国的行政区划GeoJSON数据。例如，有些项目会基于官方公布的行政区划调整进行更新。使用这些数据时，需要注意数据的时效性和准确性。

注意：不同来源的数据采用的坐标系可能不同。国内地图服务（如高德、百度）通常使用GCJ-02坐标系（火星坐标系），而Leaflet默认使用WGS-84坐标系（EPSG:4326）。如果数据源和地图底图坐标系不一致，会导致位置偏移。在加载数据前，务必确认坐标系，必要时进行坐标转换。

1.2 数据处理与优化实战

拿到原始的GeoJSON数据后，我们很少会直接使用。通常需要进行一些处理，以提升地图性能和用户体验。

数据简化（Simplification）：高精度的行政区边界包含大量顶点，在浏览器中渲染会消耗大量性能，尤其是在显示省级或国家级地图时。我们可以使用Turf.js这样的地理空间分析库进行简化。

// 假设我们有一个原始的GeoJSON对象 originalGeoJson
const simplifiedGeoJson = turf.simplify(originalGeoJson, {
  tolerance: 0.001, // 容差，值越大简化程度越高
  highQuality: false // 是否使用更高质量但更慢的算法
});

属性字段筛选：原始的GeoJSON properties 对象里可能包含很多我们用不到的字段（如内部ID、统计代码等）。为了减小文件体积，可以在服务端或构建阶段移除这些字段。

层级数据构建：对于省-市-县三级联动可视化，我们需要构建层级化的数据。一种常见做法是为每个省级Feature，嵌套其下属的市级Feature集合。

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "浙江省",
        "adcode": "330000",
        "level": "province"
      },
      "geometry": {...},
      "children": [ // 非标准GeoJSON属性，需自定义
        {
          "type": "Feature",
          "properties": {"name": "杭州市", "adcode": "330100", "level": "city"},
          "geometry": {...}
        },
        // ... 其他城市
      ]
    }
    // ... 其他省份
  ]
}