<!--
 * @Date: 2021-12-03 13:59:55
 * @information: echart AMap
 * echart 配置官方文档(旧版): https://echarts.apache.org/v4/zh/option.html#title
 * AMap 官方加载区划信息：https://developer.amap.com/api/javascript-api/reference/search#m_AMap.DistrictSearch
 * AMap 官方加载地图元数据：https://developer.amap.com/api/amap-ui/reference-amap-ui/geo/district-explorer#interface
-->
<template>
  <div id="page20">
    <div class="wrap">
      <div style="border-bottom: 1px dashed #AFD07C">
        <button @click="onClina">中国</button>
        <span style="margin-left: 20px;">{{areaName}}</span>
      </div>

      <div id="map"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
// 中国地图json数据
import mapChinaJson from '@/assets/json/china.json'
// 初始业务数据
import mapDataJson from '@/assets/json/mapData.json'

export default {
  title: 'echart AMap',
  data () {
    return {
      myChart: null, // echarts实例
      mapData: mapDataJson, // 地图显示的数据
      areaName: 'china', // 区域名称
    }
  },
  created () {

  },
  mounted () {
    this.loadMap()
  },
  methods: {
    // 绘制地图
    loadMap (mapName = 'china', data = { features: [] }) {
      !data.features && (data.features = [])
      let registerName = 'china1'
      let zoom = 1.0
      if (['china'].includes(mapName)) { // 显示全国地图
        data = mapChinaJson
        this.mapData = mapDataJson
        registerName = 'china'
        zoom = 1.2
      }
      this.areaName = mapName

      console.log('地图原数据', data)

      // 注册地图，china显示右下角南海诸岛，china1则不显示
      echarts.registerMap(registerName, data)
      this.myChart = echarts.init(document.getElementById('map'))
      this.myChart.on('click', this.mapClick)
      // echarts配置项
      const option = {
        visualMap: { // 视觉映射组件配置
          type: 'continuous', // 定义为连续型 visualMap
          show: true,
          bottom: '5%',
          left: '2%',
          text: ['高', '低'], // 两端的文本
          min: 0, // 指定 visualMapContinuous 组件的允许的最小值
          max: 100, // 指定 visualMapContinuous 组件的允许的最大值
          inRange: { // 定义 在选中范围中 的视觉元素
            color: ['#fff', '#A0CFFF', '#409EFF'], // 图元的颜色
          },
          calculable: true, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）
        },
        tooltip: { // 提示框组件
          trigger: 'item',
          formatter: function (item) {
            if (item.name == '南海诸岛') {
              return ''
            } else {
              return item.name + '<br>业务数据：' + (item.value || 0) + ' 个'
            }
          }
        },
        series: [ // 系列列表。每个系列通过 type 决定自己的图表类型
          {
            type: 'map',
            map: registerName,
            name: '业务数据', // 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列
            aspectScale: 0.75, // 用于 scale 地图的长宽比
            zoom, // 地图缩放多少倍
            roam: true, // 允许缩放和平移
            mapType: '自定义地图',
            selectedMode: 'single', // 点击区域，会处于选中状态，single单选
            showLegendSymbol: false, // 在图例相应区域显示图例的颜色标识（系列标识的小圆点），存在 legend 组件时生效
            // center: [100.97, 35.71], // 初始化时的地图位置，可通过改变地图中心视角的经纬度来实现地图的平移
            itemStyle: { // 地图区域的多边形图形样式
              normal: { // 正常时的样式
                color: '#ccc', // 图形的颜色
                borderColor: '#303133', // 图形的描边颜色
                areaColor: '#d4f7fc', // 地图区域颜色
                borderWidth: 0.5, // 描边线宽。为 0 时无描边
                label: { // 设置地图区域名的文本样式，例如地名的字体大小等
                  show: true, // 显示地区的文本名称,默认是不显示的，默认状态是hoverORclick才显示
                  fontSize: 12,
                  textStyle: {
                    color: '#606266'
                  }
                }
              },
              emphasis: { // 选中后的样式
                areaColor: '#4382F6',
                borderColor: '#fff',
                areaStyle: {
                  color: '#fff'
                },
                label: {
                  show: true,
                  fontSize: 12,
                  textStyle: {
                    color: '#003767'
                  }
                }
              }
            },
            data: this.mapData, // 地图系列中的数据内容数组。数组项可以为单个数值
          }
        ]
      }

      if (mapName == '海南省') {
        // 由于海南地图包括南海及南海诸岛在内的大片区域，所以显示海南地图时，要将地图放大，并设置海南岛居中显示
        option.series[0].center = [109.844902, 19.0392]//中心位置
        option.series[0].layoutCenter = ['50%', '50%']//地图相对容器偏移
        option.series[0].layoutSize = '600%'//地图放大比例
      } else {
        option.series[0].center = undefined
        option.series[0].layoutCenter = undefined
        option.series[0].layoutSize = undefined
      }

      this.myChart.setOption(option)
    },

    // 地图区域点击
    mapClick (obj) {
      console.log('地图区域点击', obj)
      if (!obj.data || obj.data.level == 'district') return
      if (obj.data.cityCode == '710000') {
        alert('台湾是中国不可分割的一部分！')
        return
      }

      // 加载区划信息, 默认查全国
      const opt = {
        showbiz: false, // 显示商圈
        subdistrict: 1, // 显示下级行政区级数
      }
      const districtSearch = new AMap.DistrictSearch(opt)
      districtSearch.search(obj.data.name, (status, result) => {
        console.log('加载区划信息', status, result)
        if (status == 'complete') {
          const { districtList } = result.districtList[0]
          if (!districtList) return
          // 处理需在地图上显示的数据
          this.mapData = districtList.map((el, i) => ({
            name: el.name,
            value: (Math.random() * 100).toFixed(),
            cityCode: el.adcode,
            level: el.level
          }))
          this.getAreaMapExplor(obj)
        }
      })
    },

    // 加载下级的地图元数据 - 用于绘制地图所需数据
    getAreaMapExplor (obj) {
      AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
        let districtExplorer = new DistrictExplorer({
          eventSupport: true, // 打开事件支持
          map: null // 地图对象实例。仅仅获取数据，不涉及地图相关的操作时，可以不设置
        })
        districtExplorer.loadAreaNode(obj.data.cityCode, (error, areaNode) => {
          if (error) return
          const mapJson = {}
          // 返回该区域中全部的子级区划Feature数组
          mapJson.features = areaNode.getSubFeatures() || []
          this.loadMap(obj.data.name, mapJson)
        })
      })
    },

    onClina () {
      this.loadMap()
    },

  }
}
</script>

<style lang="scss">
#page20 {
  .wrap {
    width: 700px;
    border: 1px solid #67c23a;

    #map {
      width: inherit;
      height: 600px;
      margin: 0 auto;
    }
  }
}
</style>