var parentJson = null;

var parentInfo = [{

  cityName: '河南',

  level: 'city',

  code: 410000,

},

];

getGeoJson(410000);

var timeFn = null;

// 利用高德api获取行政区边界geoJson

// adcode 行政区code 编号

function getGeoJson(adcode) {

  AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {

    var districtExplorer = new DistrictExplorer();

    districtExplorer.loadAreaNode(adcode, function (error, areaNode) {

      if (error) {

        console.error(error);

        return;

      }

      let Json = areaNode.getSubFeatures();

      if (Json.length > 0) {

        parentJson = Json;

      } else if (Json.length === 0) {

        Json = parentJson.filter((item) => {

          if (item.properties.adcode == adcode) {

            return item;

          }

        });

        if (Json.length === 0) return;

      }

      proceData(Json);

    });

  });

}

//处理数据

function proceData(Json) {

  let mapData = [{

    name: '郑州市',

    cityCode: '410100',

    value: '460',

  },

    {

      name: '开封市',

      cityCode: '410200',

      value: '1372',

    },

    {

      name: '洛阳市',

      cityCode: '410300',

      value: '851',

    },

    {

      name: '平顶山市',

      cityCode: '410400',

      value: '720',

    },

    {

      name: '安阳市',

      cityCode: '410500',

      value: '1139',

    },

    {

      name: '鹤壁市',

      cityCode: '410600',

      value: '772',

    },

    {

      name: '新乡市',

      cityCode: '410700',

      value: '8143',

    },

    {

      name: '焦作市',

      cityCode: '410800',

      value: '723',

    },

    {

      name: '濮阳市',

      cityCode: '410900',

      value: '705',

    },

    {

      name: '许昌市',

      cityCode: '411000',

      value: '448',

    },

    {

      name: '漯河市',

      cityCode: '411100',

      value: '1194',

    },

    {

      name: '三门峡市',

      cityCode: '411200',

      value: '560',

    },

    {

      name: '南阳市市',

      cityCode: '411300',

      value: '373',

    },

    {

      name: '商丘市',

      cityCode: '411400',

      value: '4543',

    },

    {

      name: '信阳市',

      cityCode: '411500',

      value: '716',

    },

    {

      name: '周口市',

      cityCode: '411600',

      value: '521',

    },

    {

      name: '驻马店市',

      cityCode: '411700',

      value: '1075',

    },

    {

      name: '济源市',

      cityCode: '419001',

      value: '285',

    },

  ];

  Json.map((item) => {

    mapData.forEach((ele) => {

      if (item.properties.adcode == ele.cityCode) {

        ele.level = item.properties.level;

      }

    });

  });

  let mapJson = {};

  //geoJson必须这种格式

  mapJson.features = Json;

  //去渲染echarts

  initEcharts(mapData, mapJson);

}

function initEcharts(mapData, mapJson) {

  let valArr = [];

  mapData.map(function (i) {

    valArr.push(i.value);

  });

  // 计算数据最大与最小值用于数据映射组件

  let max = Math.max.apply(null, valArr);

  let min = Math.min.apply(null, valArr);

  //注册

  echarts.registerMap('Map', mapJson);

  //这里加true是为了让地图重新绘制，不然如果你有筛选的时候地图会飞出去

  myChart.setOption(

    {

      backgroundColor: 'rgb(20,28,52)',

      tooltip: {

        trigger: 'item',

      },

      visualMap: {

        type: 'piecewise',

        min: min,

        max: max,

        splitNumber: 5,

        left: 35,

        bottom: 50,

        itemWidth: 21,

        itemHeight: 8,

        showLabel: false,

        orient: 'horizontal',

        text: ['高', '低'],

        itemGap: 2,

        textStyle: {

          color: '#fff',

        },

        inRange: '',

        color: [

          'rgba(7, 83, 114,0.8)',

          'rgba(24, 100, 141,0.9)',

          'rgba(33, 122, 168,0.8)',

          'rgba(28, 138, 187,0.7)',

          'rgba(34, 156, 199,0.8)',

        ],

        show: true,

      },

      series: [{

        name: '地图',

        type: 'map',

        map: 'Map',

        roam: true, //是否可缩放

        zoom: 1, //缩放比例

        aspectScale: 0.9, //长宽比0.75

        data: mapData,

        itemStyle: {

          normal: {

            show: true,

            areaColor: '#2E98CA',

            borderColor: 'rgb(185, 220, 227)',

            borderWidth: '1',

          },

        },

        label: {

          normal: {

            show: true, //显示省份标签

            textStyle: {

              color: 'rgb(249, 249, 249)', //省份标签字体颜色

              fontSize: 12,

            },

          },

          emphasis: {

            //对应的鼠标悬浮效果

            show: true,

            textStyle: {

              color: '#000',

            },

          },

        },

      },

      ],

    },

    true

  );

  // 单击下钻

}

//echarts点击事件

myChart.on('click', (params) => {

  clearTimeout(timeFn);

  timeFn = setTimeout(function () {

    // 无下级地图数据时不下钻

    if (!params.value) {

      alert('暂无数据');

      return;

    }

    //如果当前是最后一级，那就直接return

    if (parentInfo[parentInfo.length - 1].code == params.data.cityCode) {

      return;

    }

    let data = params.data;

    parentInfo.push({

      cityName: data.name,

      level: data.level,

      code: data.cityCode,

    });

    getGeoJson(data.cityCode);

  },

    250);

});

// 绑定双击事件，返回上级地图

myChart.on('dblclick', function (params) {

  clearTimeout(timeFn);

  if (parentInfo.length < 1) {

    return;

  }

  if (parentInfo.length === 1) {

    getGeoJson(parentInfo[parentInfo.length - 1].code);

    return;

  }

  parentInfo.pop();

  getGeoJson(parentInfo[parentInfo.length - 1].code);

});