echarts 在线获取区县GeoJson动态载入地图

背景

由于目前echarts不提供城市（包含区县）地图数据，把本地GeoJson文件放在项目内又太多了（总共344个，我滴个妈），故选择在线获取GeoJson的形式实现

一开始我使用的是百度地图，但是得将一个城市的所有区都搜一遍，而且getBoundary()函数返回的行政区数据，会把小岛化为一块，不是很好，尤其是舟山市这种全是小岛的城市。。。orz

所以我另寻他路。。。 

实现方式

• echarts + 高德地图
• echarts + dataV.GeoAltlas

 结合高德地图

需要的外部js引入

<!-- 高德API -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> 
<!-- 高德UI -->
<script type="text/javascript" src="https://webapi.amap.com/ui/1.0/main.js"></script> 

调用高德服务动态获取城市的信息（当然你有json文件也可以）

关于该服务的详情：https://lbs.amap.com/api/webservice/guide/api/district

我这里用的是angularJS，上面加载用的lazyload

let defer = $q.defer();
//发起http异步请求
var url = "https://restapi.amap.com/v3/config/district?keywords='+城市名称+'&key=高德服务key&subdistrict=1";
$http.get(url).success(function(data){
    defer.resolve();
});
return defer.promise;

接着使用高德UI，参考链接：https://lbs.amap.com/api/javascript-api/reference-amap-ui/geo/district-explorer

AMapUI.loadUI(['geo/DistrictExplorer'], DistrictExplorer => {
    var districtExplorer = new DistrictExplorer({
        eventSupport: true
    });
    districtExplorer.loadAreaNode(areaCode, (error, areaNode) => {
        if (error) {
            console.error(error);
            return;
        }
        let mapJson = {};
        mapJson.features = areaNode.getSubFeatures();
        // console.log('geoJson', mapJson);
        initStatus(mapJson);//echarts-option配置
    });
});

echarts 配置

function initStatus(geoJson){
    require(['echarts'],function(echarts){
        var dom = document.getElementById("mapArea");
        var myChart = echarts.init(dom);
        echarts.registerMap(mapType, geoJson);//地图就有了
        var option = {
            tooltip: {
                show: true,
                trigger: 'item',
                formatter: function(params, ticket, callback){
                    return ... ;
                },
                position: function(point, params, dom, rect, size){
                    ...
                }
            },
            series: [{
                type: 'map',
                mapType: 'mapType',
                ...
                data: [...]
            }]
        };
        myChart.setOption(option);
        myChart.on('click', function(params){
            ...
        });
    })
}

光是配置地图的话并没有用到高德API，这里引入主要是后面需求中会用到 

结合DataV.GeoAltlas（这个真的贼好使）

地址：https://datav.aliyun.com/tools/atlas/

 这里可以直接下载JSON

先获取城市Code，然后直接请求获取GeoJson

$http.get("https://geo.datav.aliyun.com/areas/bound/"+code.toString()+"_full.json").success(function(data){
    //console.log('geo-data',data);
    echarts.registerMap('district', data);
    myChart.setOption(option);
 });