1. 为什么需要乡镇街道级地图数据最近在做一个广西本地的政务系统项目需要展示各个乡镇街道的统计数据。刚开始想着直接用现成的地图数据结果发现市面上能找到的要么太贵要么精度不够。特别是像广西这样地形复杂的地区很多现成的geojson数据都只到区县级别根本满足不了需求。这让我想起去年做的一个社区网格化管理项目当时也是卡在街道边界数据上。后来发现其实用geojson.io这个工具完全可以自己绘制虽然费点时间但数据精准度完全可控。最重要的是这样生成的数据完全免费而且可以根据项目需求自由调整。2. 准备工作获取基础地图数据2.1 使用阿里云DataV获取区县轮廓在开始绘制乡镇街道之前我们需要先有个基础框架。推荐使用阿里云DataV的地图选择器http://datav.aliyun.com/tools/atlas/这个工具可以免费获取到全国各省市区的标准geojson数据。具体操作很简单打开网页后在搜索框输入广西找到你要绘制的区县比如南宁市武鸣区点击下载按钮就能获取到该区县的geojson文件这个数据会作为我们后续绘制乡镇街道的基础轮廓。我建议把下载的文件命名为guangxi_wuming_district.json这样清晰的名字方便后续管理。2.2 安装必要工具除了基础数据我们还需要准备最新版的Chrome或Firefox浏览器稳定的网络连接绘制过程需要加载地图底图参考用的广西乡镇行政区划图可以在广西民政厅官网找到3. 使用geojson.io绘制乡镇边界3.1 导入基础轮廓打开geojson.io网站你会看到一个简洁的界面。左侧是地图展示区右侧是代码编辑区。把刚才下载的武鸣区geojson文件直接拖拽到右侧空白处左侧地图就会显示该区域的轮廓。这里有个实用技巧点击左下角的OSM按钮切换到中文地图这样后续绘制时更容易辨认地标。我刚开始用的时候没注意这个结果对着英文地名画了半天效率特别低。3.2 绘制乡镇边界现在开始正式绘制乡镇边界点击工具栏上的多边形按钮看起来像个小房子在基础轮廓内按照参考地图的乡镇分界线开始绘制每完成一个乡镇的绘制系统会自动生成对应的geojson代码以武鸣区的灵马镇为例先在地图上找到灵马镇的大致位置沿着边界线逐点点击形成闭合多边形双击最后一个点完成绘制绘制过程中要注意尽量放大到最大层级操作这样精度更高遇到复杂地形可以多设几个点每个乡镇绘制完成后建议立即在属性面板里添加名称比如name:灵马镇3.3 处理特殊地形广西很多乡镇都有复杂的喀斯特地貌绘制时可能会遇到飞地一个乡镇被其他乡镇包围的独立区域岛屿比如靠近河边的乡镇边界模糊区域对于这些特殊情况我的经验是飞地要单独绘制为一个多边形可以在属性里添加parent字段标明所属乡镇不确定的边界可以参考卫星影像4. 导出和使用geojson数据4.1 数据整理与导出当所有乡镇都绘制完成后点击菜单栏的Save按钮选择GeoJSON格式下载建议命名为guangxi_wuming_towns.json这样的格式这里有个重要步骤检查数据有效性。我推荐使用geojsonlint.com验证文件格式是否正确。之前有次赶工没检查结果集成到项目里才发现有个多边形没闭合调试了好久。4.2 在项目中使用在前端项目中使用这个数据很简单。以ECharts为例// 加载地图数据 $.get(guangxi_wuming_towns.json, function(geoJson) { // 注册地图 echarts.registerMap(wuming, geoJson); // 在option中使用 option { series: [{ type: map, map: wuming, data: [ {name: 灵马镇, value: 123}, // 其他乡镇数据... ] }] }; });如果是React项目也可以使用react-simple-maps这样的库来展示。5. 常见问题与优化技巧5.1 绘制效率提升刚开始绘制时我花了一整天才能完成一个区县。后来摸索出几个提升效率的方法使用快捷键P快速切换绘制工具按住Shift键可以微调点的位置先绘制大块区域再用分割线工具细化5.2 数据更新维护乡镇行政区划有时会调整建议每年检查一次民政部门的最新区划建立版本控制系统管理geojson文件可以在属性中添加update_time字段5.3 性能优化当乡镇数量很多时geojson文件可能会很大。可以考虑使用mapshaper.org工具简化多边形按需加载比如只加载当前显示的区县使用topojson格式替代geojson6. 其他应用场景除了前端展示这些数据还可以用于后端空间计算如判断坐标所属乡镇移动端离线地图数据分析可视化最近我还发现一个妙用把这些数据导入到QGIS中可以生成各种专业的分析图表给领导汇报时特别有用。