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

您所在的位置:网站首页 省市区县乡镇大小 获取街道、乡镇级的地图geoJson数据,使用echarts绘制地图

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

2024-07-09 23:48| 来源: 网络整理| 查看: 265

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

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);


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3