首先,来看下效果图
在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载
前段时间给公司弄了一套基于echarts map的地图数据展示的平台,开发过程中发现百度官方已经不提供地图下载了,于是只能期望能在网上搜到哪位大佬帮忙收集的json文件。找是找到了,然鹅发现大部分都年代久远了,很多地区其实已经重新划分行政区划了。
所以,只能想想其他办法了,回想起平常使用高德地图搜索某个地名的时候,好像会有个边界区域给我们绘制出来,然后我就觉得它既然能画出来,应该会有办法从某些渠道获取,或者高德地图会提供相应的API。于是乎,去到了高德开放平台仔细的查看了一下他提供的api,哈哈,果然有!有了接口,接下来就是撸码了。
第一步,通过高德api获取边界数据
通过查阅API文档可以知道,获取边界数据的接口为行政区查询服务(AMap.DistrictSearch
)。使用该服务之前记得去申请一个key,用于调用高德接口,申请地址直通车:https://lbs.amap.com/dev/key/app。
1、在页面添加 JS API 的入口脚本标签,并将其中「您申请的key值」替换为您刚刚申请的 key;
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=「您申请的key值」&plugin=AMap.DistrictSearch"></script>
2、通过以下方式获取数据,以获取中国地图为例;
this.opts = {
subdistrict: 1, //返回下一级行政区
showbiz: false //最后一级返回街道信息
};
this.district = new AMap.DistrictSearch(this.opts);//注意:需要使用插件同步下发功能才能这样直接使用
this.district.search('中国', (status, result) => {
if (status == 'complete') {
this.ge