// 直接用就行，已经是组件了
// 数据来源地址
http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.769817845138945&lng=104.29901249999999&zoom=4
//  例面的china.geo.json文件见https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json
<template>
    <div class="echart_bmap_wrapper">
        <el-button class="btn" type="primary" @click="goBack" size="mini">全国</el-button>
      <div class="bmap-box" id="bmapChartBox"></div>
    </div>
  </template>
  <script>

  import * as echarts from 'echarts';
  var provinceMapData = require('@/utils/china.geo.json');//全国地图省份数据，自己取上面地址取
  import axios from 'axios'//采用axios动态请求数据
  export default {

    name: 'echartBmap',
    data() {
      return {
        pointData: [],//标点信息，需要动态获取，初始化全国地图的点位
        provinceCodeData: [],//处理后全国省份数据带code
        mapStack: [],//存储一下地图历史记录，用于返回
        nowChooseData: [],//当前选择的数据源
        publicUrl:"https://geo.datav.aliyun.com/areas_v3/bound/",
        option: {
            tooltip: {
                show: true,
                trigger: 'item',
                backgroundColor: 'transparent',
                padding:[0,0,0,0],
                className: 'custom-tooltip',
                borderWidth :0,
                formatter: function (params) {
                    // console.log(params);
                    var str = `<div style = " color:#fff;background-color:none;position: relative;">
                        <img src='${require("../../assets/largeScreen/mapAleart.png")}' style="width:200px;height:250px;display: inline-block;position: absolute;top:0;left:0"></img>
                        <div style="width:200px;height:250px;padding:15px 10px;font-size:12px;position: absolute;top:0px;left:0;z-index:2">
                            <div style='margin:3px 10px;text-align:center;font-size:14px'>
                                <div style='float:left'>山A888888</div>  
                                <div style='float:right'>用车中</div>
                            </div>
                            <div style='margin:3px 10px;margin-top:8px'>车系：宝马</div>
                            <div style='margin:3px 10px;'>车型：SUV</div>
                            <div style='margin:3px 10px;'>姓名：王益</div>
                            <div style='margin:3px 10px;'>手机号：157368236868</div>
                            <div style='background: rgba(0,20,29,0.27);margin:5px 10px;text-align:center;border-radius:5px'>交强险2021-11-11到期</div>
                            <div style='background: rgba(0,20,29,0.27);margin:5px 10px;text-align:center;border-radius:5px'>设备脱离告警</div>
                            <div style='background: rgba(0,20,29,0.27);margin:5px 10px;text-align:center;border-radius:5px'>车辆维保中</div>
                        </div>
                
                    </div>`
                    return str
                },

            },
          geo: [{
            map: 'js',
            aspectScale: 0.9,
            roam: true, // 是否允许缩放
            zoom: 1.1, // 默认显示级别
            center: [116.405285, 39.904989], // 地图中心点坐标
            label: {
              normal: {
                show: true, // 是否地图显示区域的文字，各省市的名字
                textStyle: {
                  color: '#fff',
                  fontSize: "8", //省份字体大小
                }
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              // 区域颜色
              areaColor: {
                type: 'radial',
                x: 0.7,
                y: 0.5,
                r: 0.4,
                // 渐变效果
                colorStops: [{
                  offset: 0,
                  color: '#24cff4' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: '#2babd9' // 50% 处的颜色
                }, {
                  offset: 1,
                  color: '#236bb2' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              emphasis: {
                areaColor: '#56dcf9', // 鼠标移入区域背景颜色
                borderWidth: 0
              },
              borderColor: '#37C1FD',
              borderWidth: 2
            },
            emphasis: {
              itemStyle: {
                areaColor: '#0160AD'
              },
              label: {
                show: 1,
                color: '#fff'
              }
            },
            zlevel: 3
          }],
          series: [{
            type: 'effectScatter',
            coordinateSystem: 'geo',
            // symbol: 'diamond',
            showEffectOn: 'render',
            rippleEffect: {
              period: 10,
              scale: 6,
              brushType: 'fill'
            },
            zlevel: 10, // 这里是关键，一定要放在 series中，显示层级，
            hoverAnimation: true,
            itemStyle: {
              normal: {
                // 点的颜色可以根据 params 参数里面的值去设定不通的颜色
                color: function (params) {
                  if (params.name == '7300网关') {
                    return 'red';
                  }
                  if (params.name == '700网关') {
                    return 'yellow';
                  }
                  if (params.name == '5300网关') {
                    return 'green';
                  }else{
                    return 'pink';
                  }
   
                },
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            data: [] // 点的数据，包含经纬度
          }]
        },
        // 测试标点数据
        gatewayPointData: {
          '黑龙江省': [
            {
              name: '7300网关',
              value: [126.642464, 45.756967]
            },
          ],
          '哈尔滨市': [
            {
              name: '7300网关',
              value: [126.957401, 45.454116]
            },
            {
              name: '700网关',
              value: [126.394846, 45.778706]
            },
            {
              name: '5300网关',
              value: [126.606415, 45.807463]
            },
            {
              name: '300网关',
              value: [126.483958, 45.876779]
            },
            {
              name: '2300网关',
              value: [126.785501, 45.739871]
            }
          ],
        },
   
        popShow: false,//弹窗是否显示
        popLeft: 0,//弹窗X轴距离
        popTop: 0,//弹窗Y轴距离
        name: '',//当前点击省份
      };
    },
    mounted() {
      // 渲染地图
      this.drawMap(provinceMapData, 0, [126.82862, 49.296976]);
      this.getProvinceCode();//处理全国省份数据
      // 初始化mapStack数据，默认全国数据
      this.mapStack = []
      this.mapStack.push(provinceMapData)
    },
    methods: {
      // 处理全国省份数据
      getProvinceCode() {
        provinceMapData.features.forEach(item => {
          this.provinceCodeData.push({
            name: item.properties.name,
            coordinateCenter: item.properties.center,
            cityCode: item.properties.adcode
          })
        });
      },
      // 返回全国
      goBack() {
        this.popShow = false
        this.mapStack = []
        this.mapStack.push(provinceMapData)
        this.drawMap(provinceMapData, 0, [126.82862, 49.296976]);
        
      },
      // 设置地图配置信息
      setMapCenterZoomData(data, zoom, center) {
        this.option.series[0].data = data;
        this.option.geo[0].zoom = zoom;
        this.option.geo[0].center = center;
   
        if (this.mapStack.length <= 1) {//设置图层位置
          this.option.geo[0].layoutSize = '100%';
          this.option.geo[0].layoutCenter = ['85%', '20%'];
        } else {
          this.option.geo[0].layoutSize = '';
          this.option.geo[0].layoutCenter = [];
        }
   
      },
      // 渲染地图
      drawMap(json, type = 0, city) {
        // 防止echarts重复
        if (document.getElementById('bmapChartBox') == null) {
          return
        }
        echarts.dispose(document.getElementById('bmapChartBox'))
        // 防止echarts重复
   
        this.echarts = echarts;
        this.dom = document.getElementById('bmapChartBox');
        this.myChart = this.echarts.init(this.dom);
        this.echarts.registerMap('js', json);
   
        if (type == 1) {//地图点击进入
          this.pointData = this.gatewayPointData[city];//标点数据
          if(this.pointData){//如果有标点数据
            console.log(this.pointData,1)
            this.setMapCenterZoomData(this.pointData, 1.2, this.pointData[0].value);
          }else{//如果没有标点数据
            // 使用测试数据 - 把当前选择地图数据作为标点数据
            this.nowChooseData.forEach(i=>{
              i.value = i.coordinateCenter
            })
            this.pointData = this.nowChooseData
            console.log(this.pointData,2)
            var center = this.nowChooseData[0].coordinateCenter;//取当前选择省市区第一个数据的坐标
            this.setMapCenterZoomData(this.pointData, 1.2, center);
          }
        } else {//初始化进入
          this.myChart.clear();
          console.log(this.pointData,3)
          this.setMapCenterZoomData([[111.670801, 40.818311],[109.840405, 40.658168]], 1, [126.82862, 49.296976]);
        }
        this.myChart.setOption(this.option);
        this.myChart.off('click');
        this.myChart.on('click', (param) => {
          // 点击弹窗方法
          // 点击获取经纬度
          let data = this.myChart.convertFromPixel('geo', [param.event.event.offsetX, param.event.event.offsetY])
          this.popLeft = param.event.event.offsetX
          this.popTop = param.event.event.offsetY
          // 获取城市名称 list下的name值
          this.name = param.name
          this.popShow = true
          // 点击弹窗方法
   
          if (param.componentType == "geo") {//点击地图
   
          } else {//点击标点不允许下钻
            return;
          }
          // 省市区三级后跳出点击
          if (this.mapStack.length >= 3) {
            this.$notify({
              message: '没有更多啦！',
              type: 'warning',
              duration: 2000
            });
            return;
          }
   
          const city = param.name;
          // 获取点击对应的cityCode
          var cityCode = ''
          if (this.mapStack.length <= 1) {//初始化全国省份数据
            this.provinceCodeData.forEach(i => {
              if (i.name == city) {
                cityCode = i.cityCode
              }
            })
          } else {//选择后的市区数据
            this.nowChooseData.forEach(i => {
              if (i.name == city) {
                cityCode = i.cityCode
              }
            })
          }
   
          this.getHomeMapData(city, cityCode)
        });
      },
      // 获取基础配置数据
      getHomeMapData(city, cityCode) {
        var cityMapData //当前选中的省市区地图数据
        // 请求数据
        
        var data
        if( cityCode == 710000){//台湾特殊处理，后缀没有_full
          data = cityCode
        
        }else{
          data =  cityCode + '_full.json'
          
        }
        //通过接口获取点击下钻的地图数据
        
        axios.get(this.publicUrl+data).then(res => {
            console.log(res)
          if (res) {
            cityMapData = res.data
            // 让历史数据一直保持在3个之内，存储显示过的地图数据
            if (this.mapStack.length < 3) {
              this.mapStack.push(cityMapData);
            }
            this.nowChooseData = []
            cityMapData.features.forEach(item => {
              this.nowChooseData.push({
                name: item.properties.name,
                coordinateCenter: item.properties.center,
                cityCode: item.properties.adcode
              })
            });
            cityMapData && this.myChart.clear();
            cityMapData && this.drawMap(cityMapData, 1, city);
          }
   
        }).catch((err) => {
          this.$message(err.message);
        });
      },
   
   
    }
  };
  </script>
  <style lang="scss" scoped>
  .echart_bmap_wrapper {
    position:relative;
    .btn {
      position: absolute;
      left: 20px;
      top: 20px;
      z-index: 1;
    }
   
    .bmap-box {
      width:29vw;
      height: 68vh;
    }
   
    .popWin {
      position: absolute;
      left: 0;
      top: 0;
      background: #00305c;
      background-size: 100% 100%;
      width: 408px;
      height: 300px;
      z-index: 100;
   
      .popLine {
        width: 340px;
        height: 1px;
        background: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
        opacity: 0.3;
        margin-left: 30px;
      }
   
      .titleInfos {
        text-align: center;
        margin-left: 30px;
        font-size: 22px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        color: #00FDFE;
        height: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: flex-start;
        .pop_close{
          color:#bbb;
          cursor: pointer;
          padding:5px;
          font-size:12px;
          position: absolute;
          top: 5px;
          right: 10px;
        }
      }
    }
   
    .infoBody {
      width: 100%;
      padding:3%;
      .homeTable{
        border:1px solid #0376ae;
        border-radius: 10px;
      }
    }
    .infoBody ::v-deep .plTableBox .el-table .cell.el-tooltip{
      border-bottom: 1px solid #086896;
    }
    .infoBody ::v-deep  .el-table, .el-table__expanded-cell {
      background-color: transparent;
    }
    .infoBody ::v-deep .el-table tr {
      // background-color: transparent!important;
      background-color: #0b4d73;
    }
    .infoBody ::v-deep  .el-table--enable-row-transition .el-table__body td, .el-table .cell{
      background-color: transparent;
    }
    .el-table::before {//去除底部白线
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0px;
    }
    .infoBody ::v-deep  .plTableBox .el-table .el-table__header th{
      background-color: transparent;
      
    }
    .infoBody ::v-deep .plTableBox .el-table--enable-row-hover .el-table__body tr:hover>td{
      background-color: rgba(0,77,167,1);
    }
    .infoBody ::v-deep .plTableBox .el-table--border td,.infoBody ::v-deep  .plTableBox .el-table--border th,.infoBody ::v-deep  .plTableBox .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
      border: none;
      color:#4daad3
    }
    .infoBody ::v-deep .plTableBox .el-table--medium td{
      padding: 0;
    }
    .infoBody ::v-deep .plTableBox .el-table__header-wrapper{
      background-color: transparent;
    }
    .infoBody ::v-deep .plTableBox .el-table--striped .el-table__body tr.el-table__row--striped td{
      background-color: #103c5c;
    }
  }
  </style>