echarts:获取省、市、区/县、镇的地图数据

目录

第一章 前言

第二章 获取地图的数据(GeoJSON格式)

2.1 获取省、市、区/县地图数据

2.2 获取乡/镇/街道地图数据


第一章 前言

需求:接到要做大屏的需求,其中需要用echarts绘画一个地图,但是需要的地图是区/县下的地图

问题:大部分例子都是中国地图或者是某个省的地图,而且数据怎么来我们都是不知道的

解决:后面将告诉大家如何获取各个地方的数据的方式

第二章 获取地图的数据(GeoJSON格式)

2.1 获取省、市、区/县地图数据

  • 渠道:阿里云数据可视化平台

DataV.GeoAtlas地理小工具系列

  •  第一步:放大地图,选择想要的区域

echarts:获取省、市、区/县、镇的地图数据_第1张图片

选中后:

echarts:获取省、市、区/县、镇的地图数据_第2张图片

  • 注意:这个网址只能最终为我们提供到区/县的数据,再往下就没有了

echarts:获取省、市、区/县、镇的地图数据_第3张图片

  • 第二步:获取数据

echarts:获取省、市、区/县、镇的地图数据_第4张图片

2.2 获取乡/镇/街道地图数据

  • 工具一:(该网站加载比较慢,耐心等待打开) 作用:通过该网站可以获取我们需要乡/镇/街道的数据

geojson.io | powered by Mapbox

  • 工具二:下载bigmap软件,如下网址  作用:这个软件能让我们获取到乡/镇/街道的看,kml数据

https://download.csdn.net/download/qq_45796592/88765204?spm=1001.2014.3001.5501

  • 安装后打开程序,添加应用

echarts:获取省、市、区/县、镇的地图数据_第5张图片

  •  选择添加在线地图源

echarts:获取省、市、区/县、镇的地图数据_第6张图片

  • 填写信息(注意:小编测试了,只有百度地图支持,高德地图没有效果

echarts:获取省、市、区/县、镇的地图数据_第7张图片

  • 添加成功后应用中就有百度地图的图标了,我们选择使用即可

echarts:获取省、市、区/县、镇的地图数据_第8张图片

  • 安装后打开程序,在右上方选择需要的乡/镇/街道数据

echarts:获取省、市、区/县、镇的地图数据_第9张图片

  • 双击地图中间选中区域,导出kml文件

echarts:获取省、市、区/县、镇的地图数据_第10张图片

echarts:获取省、市、区/县、镇的地图数据_第11张图片

  • 导出后的文件目录

echarts:获取省、市、区/县、镇的地图数据_第12张图片

  • 将导出的kml文件,导入工具一:

点击open -> 导入下载的kml文件(注意离线地图二次开发也是对开发者有作用的嗷)

echarts:获取省、市、区/县、镇的地图数据_第13张图片

  •  地图区域将出现你导入的区块

echarts:获取省、市、区/县、镇的地图数据_第14张图片

  • 复制右侧区域保存成json文件即可使用,左边就是我们想要的区的区域

echarts:获取省、市、区/县、镇的地图数据_第15张图片

  • 当我们添加多个区域的xml文件时,就会有多个展示

echarts:获取省、市、区/县、镇的地图数据_第16张图片

这个数据就是两个区域也会自动合并,最终是拼接好的,不用担心

 echarts:获取省、市、区/县、镇的地图数据_第17张图片

  • 复制右侧区域保存成json文件即可使用,也就是我们需要的乡/镇/街道地图数据

 echarts:获取省、市、区/县、镇的地图数据_第18张图片

第三章 使用时遇到的问题

echarts bug:Invalid geoJson formatCannot read properties of undefined (reading ‘length‘)-CSDN博客

你可能感兴趣的:(echarts,echarts,前端,javascript,地图数据)