📌摘要:做 ECharts 地图可视化、数据大屏、WebGIS 开发,经常需要省市区县街道的 GeoJSON 边界。网上搜集的资源常会出现数据老旧、边界残缺、坐标系偏移等问题。今天分享 MapLand 在线地理边界预览下载工具,支持下载前可视化预览边界,一键导出标准 GeoJSON 文件。
一、开发中经常遇到的边界数据痛点
做地图可视化开发的小伙伴基本都踩过下面这些坑:
- 网络零散 GeoJSON 数据更新滞后,行政区划发生调整后,地图渲染结果与现状不符;
- 边界几何体不闭合,页面渲染地图出现空洞、闪烁异常;
- 坐标系不统一,导入 ECharts、Leaflet 后产生地图偏移;
- 属性字段缺少标准 adcode 编码,业务统计数据无法和地理边界关联匹配;
- 获取可用矢量边界,需要安装 ArcGIS/QGIS 等重型 GIS 软件进行数据处理,效率偏低。
MapLand 专为解决这类问题打造,网页端直接使用,无需安装专业 GIS 软件。
二、MapLand 平台核心功能✨
1. 多级行政区逐级选择
支持省份、市、区县、街道 四级行政区划筛选,逐级选定目标区域,页面展示对应的标准区划代码。 示例:选择北京市,页面展示区划代码1101,可直接用于业务数据关联、地图下钻开发。
2. 下载前在线地图预览
选定行政区后页面实时高亮渲染行政区边界轮廓:
- 支持缩放、拖拽地图,直观核验区域范围;
- 先预览,后导出,提前确认边界范围,减少无效导出操作。
3. WGS84 (GPS) 标准坐标系
平台输出 WGS84(EPSG:4326) GPS 坐标系数据,适配: ECharts、AntV、Mapbox、Leaflet、OpenLayers 等主流 Web 前端地图框架,导出后无需额外坐标转换,规避地图偏移问题。
4. 一键导出 GeoJSON 矢量文件
选定区域、确认坐标系参数后,即可导出 GeoJSON,文件结构规范,属性信息完整,拿到文件可直接接入项目开发。
三、简单上手操作步骤📝
- 浏览器打开 MapLand网页
- 第一步:下拉框选择目标省份,示例选择「北京市」
- 第二步:继续选择对应市区 / 街道层级,支持精确到区县、街道级别;
- 第三步:在地图面板查看高亮边界,核对区域范围,查看页面展示的区划代码;
- 第四步:确认坐标系为 WGS84 (GPS),执行导出,获取 GeoJSON 文件用于开发。
示例:选择北京市,地图实时渲染全市蓝色高亮边界,展示区划代码 1101,完成参数确认后即可导出全市 GeoJSON 数据。
插入代码段:ECharts 快速加载 GeoJSON 示例
拿到导出的 GeoJSON 之后,直接在 ECharts 里加载渲染,简单示例代码:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>地图演示</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="map" style="width:800px;height:600px;"></div>
<script>
const myChart = echarts.init(document.getElementById('map'));
// 替换成你从MapLand下载的geojson地址
fetch('./beijing.geojson')
.then(res=>res.json())
.then(geoJson=>{
echarts.registerMap('beijing', geoJson);
const option = {
series:[{
type:'map',
map:'beijing'
}]
}
myChart.setOption(option);
})
</script>
</body>
</html>
将下载得到的 GeoJSON 文件放到项目目录,修改文件路径,就能快速渲染行政区划地图,省去数据清洗、坐标转换环节。
四、适合哪些场景使用💻
- ECharts / AntV G2 地图可视化、数据大屏开发;
- WebGIS 前端项目,Leaflet、OpenLayers、Mapbox 地图开发;
- 数据分析、科研绘图,需要行政区矢量边界;
- 规划设计,快速获取省市区街道地理边界;
- 学习测试,获取标准 GeoJSON 练习地图开发。
五、小结
MapLand 轻量化在线边界工具,核心优势是所见即所得的地图预览,支持省市区街道多级边界导出,省去四处搜集资源、坐标转换、修复残缺边界的大量时间。 对于需要规范、高精度行政区划 GeoJSON 的开发者,可以收藏备用。
💡如果本篇对你有帮助,欢迎点赞收藏,后续继续分享 GIS、前端地图开发实用工具。