从KML到GeoJSON：手把手构建乡镇街道级ECharts地图数据

1. 为什么需要乡镇街道级地图数据？

在数据可视化项目中，行政区域地图是最基础也最常用的数据类型之一。相比省级、市级的大范围地图，乡镇街道级别的精细地图能让数据呈现更加精准。比如做人口密度分析时，同一个城市不同街道的人口分布可能有巨大差异；商业网点规划时，需要精确到每个社区的范围来评估覆盖情况。

但实际操作中，获取这类精细地图数据并不容易。官方渠道提供的数据往往只到区县级别，而商业地理数据服务又价格昂贵。这时候，通过开源工具和公开资源自制地图数据就成了性价比最高的选择。我去年参与一个社区养老服务项目时，就遇到过这个问题——我们需要展示全市200多个社区的服务覆盖情况，但根本找不到现成的社区边界数据。

2. 准备工作：获取基础地理数据

2.1 选择合适的地图下载工具

BIGEMAP是我用过最顺手的地图下载工具之一，它支持导出多种格式的地理数据。安装过程很简单：

1. 访问官网下载全能版安装包
2. 按照向导完成安装
3. 首次启动时需要注册账号

安装完成后，你会看到一个类似普通地图软件的界面。但它的核心功能是允许用户框选区域后，下载对应区域的矢量边界数据。这里有个小技巧：在左侧图层选项中勾选"行政边界"，这样下载时会自动识别各级行政区划。

2.2 下载乡镇街道KML数据

实际操作时，我建议按这个步骤来：

1. 在搜索框输入目标区域名称，比如"XX县"
2. 放大到能够清晰看到乡镇街道边界的级别
3. 右键点击目标区域，选择"下载行政边界"
4. 在弹出窗口中确认下载范围为"乡镇级"或"街道级"
5. 选择输出格式为KML（Keyhole Markup Language）

下载完成后，你会在指定文件夹看到多个KML文件。每个文件对应一个行政单元，文件名通常包含行政区划名称。这里要注意的是，有些地区可能会把相邻街道合并下载，这时需要手动拆分成单独的文件。

3. 格式转换：从KML到GeoJSON

3.1 使用geojson.io进行批量转换

虽然KML是常见的地理数据格式，但在前端可视化中，GeoJSON才是更通用的选择。geojson.io这个在线工具可以免费完成这个转换：

1. 打开geojson.io网站
2. 将下载的KML文件拖拽到左侧地图区域
3. 每拖入一个文件，右侧编辑器就会自动生成对应的GeoJSON代码
4. 重复操作直到所有KML文件都完成转换

转换后的数据会以FeatureCollection的形式呈现。每个Feature代表一个行政单元，包含几何图形和属性数据。我建议在转换完成后立即点击"Save"按钮将数据保存到本地，避免因网页刷新导致数据丢失。

3.2 数据合并与验证

当处理多个行政单元时，最终我们需要一个包含所有区域的完整GeoJSON文件。在geojson.io中：

1. 确保所有KML都已转换为Feature
2. 全选右侧编辑器中的所有代码
3. 复制后粘贴到文本编辑器中
4. 检查每个Feature的properties是否包含正确的行政区划名称

常见问题包括坐标系不匹配、几何图形错误等。我遇到过几次转换后的图形严重变形的情况，这时需要回到BIGEMAP重新下载数据，或者尝试其他转换工具如QGIS。

4. 适配ECharts的特殊处理

4.1 GeometryCollection问题解析

ECharts对GeoJSON的支持有个重要限制：不能直接处理GeometryCollection类型。但在实际转换中，特别是处理复杂行政边界时，geojson.io经常会产生这种结构。比如一个街道可能由多个不相连的区域组成，转换工具就会把它们打包成一个GeometryCollection。

识别这个问题很简单：在GeoJSON中搜索"GeometryCollection"，如果能找到，就需要进行结构调整。未处理的数据结构是这样的：

json复制{
  "type": "Feature",
  "geometry": {
    "type": "GeometryCollection",
    "geometries": [
      {
        "type": "Polygon",
        "coordinates": [...]
      },
      {
        "type": "Polygon",
        "coordinates": [...]
      }
    ]
  }
}

4.2 数据结构重组实战

处理原则是将GeometryCollection展开为多个独立的Feature。具体操作：

1. 用代码编辑器打开GeoJSON文件
2. 找到包含GeometryCollection的Feature
3. 为其中的每个几何图形创建一个新的Feature
4. 复制原始属性到每个新Feature

处理后应该变成这样：

json复制[
  {
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [...]
    }
  },
  {
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [...]
    }
  }
]

我写了一个简单的Python脚本来自动化这个过程，核心是利用json库解析数据，然后重组Feature结构。对于非技术用户，也可以使用在线工具JSON Editor Online进行手动调整。

5. 优化与性能调优

5.1 简化几何数据

乡镇街道级地图数据往往包含大量细节，这会导致文件体积过大。在前端渲染时可能造成性能问题。我常用的优化方法有：

1. 减少坐标点密度：使用地图工具简化多边形边界
2. 删除冗余属性：只保留必要的行政区划信息
3. 使用拓扑结构：如TopoJSON格式可以进一步压缩数据

特别是在移动端项目中，经过优化的数据可以使加载速度提升数倍。一个实际的案例：某区级项目原始数据有8MB，经过简化后降到600KB，而视觉差异几乎不可见。

5.2 坐标系一致性检查

中国地区常用的坐标系包括WGS84、GCJ02和BD09。ECharts默认使用WGS84坐标，但如果原始数据是其他坐标系，就需要进行转换。有个简单的方法验证：

1. 在geojson.io中加载数据
2. 对比地图上的位置与实际位置
3. 如果存在偏移，就需要使用专业工具转换

我推荐使用开源库coordtransform进行批量转换，或者使用在线坐标转换工具先处理原始KML数据。

6. 在ECharts中使用自定义地图

处理好的GeoJSON数据可以直接在ECharts中注册为地图：

javascript复制// 注册地图
echarts.registerMap('myDistrict', geoJSONData);

// 在option中使用
option = {
  series: [{
    type: 'map',
    map: 'myDistrict',
    data: [
      {name: '街道A', value: 123},
      {name: '街道B', value: 456}
    ]
  }]
};

实际项目中，我建议配合axios等库动态加载GeoJSON文件，而不是直接写在代码里。这样方便后期更新地图数据而不需要重新部署应用。

7. 常见问题排查

7.1 地图显示不完整

可能原因：

1. 数据转换过程中几何图形被破坏
2. 坐标系不匹配导致位置偏移
3. ECharts容器尺寸或比例设置不当

解决方法：

1. 回查原始KML数据是否完整
2. 在geojson.io中验证图形是否正确
3. 检查浏览器控制台是否有错误提示

7.2 交互事件失效

如果发现鼠标悬停、点击等事件不触发：

1. 确认Feature的properties中包含正确的name字段
2. 检查series.data中的name与GeoJSON中的名称完全匹配
3. 确保没有重复注册同名的地图

我在一个省级项目中就遇到过这个问题：某个县名称在数据中是"XX县"，但在绑定数据时写成了"XX市"，导致整个县的交互都无法触发。