<template>
  <div id="map" ref="areaRankingAll"></div>
</template>
<script>
import * as echarts from "echarts"
import axios from "axios" //采用axios动态请求数据
export default {
  data() {
    return {
      //线上请求JSON文件数据地址
      publicUrl: "https://geo.datav.aliyun.com/areas_v3/bound/",
      //allCode 区域行政编码信息
      allCode: [
        // {name:"廉江市",adcode:"440881"}
      ],
      locate: [
        {
          name: "安徽",
          value: [117.29, 32.0581, 50],
        },
      ],
    }
  },
  watch: {},
  mounted() {
    this.initChart() //初始化地图
  },
  methods: {
    cancel() {
      this.initChart()
    },
    getGeoJson(jsonName) {
      return axios.get(this.publicUrl + jsonName)
    },
    initEcharts(geoJson, name, chart) {
      console.log(geoJson.features, name)
      let self = this
      echarts.registerMap(name, geoJson)
      let option = {
        title: {
          text: "", // 地图名称
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            if (params.value.length > 1) {
              return params.name + "：" + params.value[2] + "人"
            }
            return `${params.name} ： ${params.value ? params.value : 0}人`
          },
          textStyle: { fontSize: 14, fontFamily: "fzzz", color: "#fff" },
          backgroundColor: "rgba(0,0,0,0.3)",
          borderColor: "rgba(0,0,0,0.3)",
        },
        geo: {
          show: false,
          map: name,
          width: name == "中国" ? "70%" : "36%", // 约束地图大小
          top: "4%",
        },
        series: [
          {
            // 小点，通过geo知道地图位置
            name: "",
            type: "scatter",
            coordinateSystem: "geo",
            data: this.locate,
            symbolSize: 8,
            encode: {
              value: 2,
            },
            tooltip: {
              show: false,
            },
            label: {},
            emphasis: {},
          },
          {
            type: "map",
            map: name,
            width: name == "中国" ? "70%" : "30%", // 约束地图大小
            top: "5%",
            // roam: true, //是否开启滚轮缩放
            // zoom: 1.5, //当前视角缩放比，调节这个设置初始大小
            // center: ["10%", 0],
            // scaleLimit: {
            //   min: 0.2,
            //   max: 2,
            // }, // 最大最小缩放比例
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                areaColor: "#EDEFFF",
                borderColor: "#7597FA",
                borderWidth: 1,
              },
              emphasis: {
                areaColor: "#4E68FF", //悬浮背景
              },
            },
            data: [{ name: "安徽省", value: 50 }],
          },
        ],
      }
      chart.setOption(option, true) //加个true解决下钻的视角偏移
      chart.off("click")
      chart.on("click", (params) => {
        //点击区域时的行政编码，然后再进行匹配
        let clickCode = self.allCode.filter(
          (areaJson) => areaJson.name === params.name
        )[0].adcode
        console.log("行政编码:" + clickCode)
        //1、如果要实现多级下钻并且展示子区域的话，下钻点击事件请求的JSON必须是该点击区域的全面父级JSON(即没有自己只有孩子们组成)
        //2、如果要实现地图只下钻一次，并且不展示目标下钻区域的子区域。如第一层地图是中国，实现点击某个省下钻到该省，但是不展示该省的子区域，那么下钻点击事件请求的JSON必须是该点击区域的确切json(即只有自己没有孩子们)
        //声明：比如这里线上引用的父级JSON带有：地域行政编码_full.json(如中国 100000_full.json),子级JSON是行政编码.json(如廉江市 440881.json)
        self
          .getGeoJson(clickCode + "_full.json")
          .then((res) => {
            self.initEcharts(res.data, params.name, chart)
          })
          .catch((err) => {
            console.log(err, "err")
            self.getGeoJson("100000_full.json").then((China) => {
              self.initEcharts(China.data, "中国", chart)
            })
          })
        console.log(params)
      })
    },
    //带头函数-初始化
    initChart() {
      let chart = echarts.init(this.$refs.areaRankingAll)
      //this.allCode获取所有的区域编码信息
      this.getGeoJson("all.json").then((all) => {
        this.allCode = all.data
      })
      //初始化地图展示
      this.getGeoJson("100000_full.json").then((China) => {
        this.initEcharts(China.data, "中国", chart)
      })
    },
  },
}
</script>
<style lang="scss" scoped></style>
