wordpress中文站,赣州网站建设行情,国内高端医疗网站建设,红旗渠建设集团网站在此以泰州靖江市为例为例#xff0c;记录一下实现过程
1、整体完成后实现的效果如下
2、获取数据
#xff08;1#xff09;DataV.GeoAtlas
第一个能想到的获取数据的网站就是它#xff0c; 是阿里推出的一个用于获取全国、各省、各市以及个县级市详细地图信息的json文…在此以泰州靖江市为例为例记录一下实现过程
1、整体完成后实现的效果如下
2、获取数据
1DataV.GeoAtlas
第一个能想到的获取数据的网站就是它 是阿里推出的一个用于获取全国、各省、各市以及个县级市详细地图信息的json文件
http://datav.aliyun.com/portal/school/atlas/area_selector 点击左侧地图选择行政区划范围
如图找到泰州市—靖江市你会发现最多只能找到县级市的地图信息不能满足我们的需求
2bigemap
这是一个可以获取到街道、乡镇的软件 找到你需要下载的信息数据 这里的问题是需要购买全能版才能下载看了淘宝价格要好几千
虽然不能下载但我们可以通过下面的操作知道靖江市下的街道、乡镇级的区域分布概况如图 上面一步因为没有授权不能下载地理信息数据所以下面我们用到了 geojson.io
3geojson.io
可以手绘获取数据或根据导入数据显示地图信息 https://geojson.io/#map3.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);
