当前位置：首页 > news >正文

获取街道、乡镇级的地图geoJson数据，使用echarts绘制地图

news 2025/8/18 1:35:51

在此以泰州靖江市为例为例，记录一下实现过程

1、整体完成后实现的效果如下
在这里插入图片描述

2、获取数据

（1）DataV.GeoAtlas

第一个能想到的获取数据的网站就是它，
是阿里推出的一个用于获取全国、各省、各市以及个县级市详细地图信息的json文件

http://datav.aliyun.com/portal/school/atlas/area_selector
点击左侧地图选择行政区划范围

如图，找到泰州市—靖江市，你会发现最多只能找到县级市的地图信息，不能满足我们的需求
在这里插入图片描述

（2）bigemap

这是一个可以获取到街道、乡镇的软件
在这里插入图片描述
找到你需要下载的信息数据
这里的问题是，需要购买全能版才能下载（看了淘宝价格要好几千）

虽然不能下载，但我们可以通过下面的操作，知道靖江市下的街道、乡镇级的区域分布概况，如图

在这里插入图片描述
上面一步因为没有授权，不能下载地理信息数据，所以下面我们用到了 geojson.io

（3）geojson.io

可以手绘获取数据，或根据导入数据显示地图信息
https://geojson.io/#map=3.14/31.64/103.67

我们可以在这个网站上，手绘后得到泰州靖江市的乡镇级地图 json数据

如下图，右侧是我们绘完图得到的geoJson数据**（这就是我们echarts绘制地图需要的数据）**

在这里插入图片描述

如下：可对“点”进行编辑，来设置属性
在这里插入图片描述

如下：可对“线”进行编辑，来调整区域大小，调节区域边界
在这里插入图片描述
像上面这张图这样：自己描线加点，大概需要半天到一天的时间
累是有点累，不过跟上面比是个省钱的办法（如果有更好的办法，欢迎留言交流）

3、绘制echats地图
最后，拿到数据后，放在本地导入，然后做为地图的数据源绘制echats地图

//导入数据
import jingjiang from "@/assets/map.json";//data
data() {return {geoData: jingjiang}
}//echarts.registerMap(mapName, mapData) 
//参数mapName是地图的名称，mapData是地图的数据
//注册后可以使用这个地图名称在Echarts中使用这个地图
echarts.registerMap("jingjiang", this.geoData);