
<template>
<div style="margin-top: -75%;">
  <div id="idname" style="padding-top: 2%;
    padding-left: 2%;
    padding-right: 2%;">
  </div>
</div>



</template>

<script>

import mapjson from 'src/components/qinhua/json/mapStyle.json'
import {MP} from 'src/components/qinhua/js/BMap.js'

export default {
  name: 'xian-echart-map',
  title:'xian-echart-map',

  data() {
    return {
      mapdata:[
        {name:'xian',value:require('src/components/qinhua/json/xian.json')}

      ],
      list:[],
      xc:'',
      timer:'',
      geoCoordMap : {

        '未央区':[108.953364,34.299687],
        '太白立交':[108.927493,34.239545],
        '狄寨塬':[109.145543,34.206836],
        '耿镇':[109.108174,34.451585],
        '高陵':[109.006904,34.498217],


      },
      data : [
        {name: '未央区', value:333},
        {name: '太白立交', value: 111},
        {name: '狄寨塬', value: 222},
        {name: '耿镇', value: 222},
        {name: '高陵', value: 222},

      ]
    }
  },
  mounted() {

  },
  methods: {

    convertData (data) {
      var res = [];
      for (var i = 0; i < this.data.length; i++) {
        var geoCoord = this.geoCoordMap[this.data[i].name];
        if (geoCoord) {
          res.push({
            name: this.data[i].name,
            value: geoCoord.concat(this.data[i].value)
          });
        }
      }
      return res;
    },
    drawChinaMap() {
      // this.$echarts.registerMap('xian', xian);


      let mapChart =this.$echarts.init(document.getElementById("idname"));

      console.log('画图~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~')
      let option = {

        tooltip : {
          triggerOn: "mousemove",
          trigger: 'item'
        },
        /*tooltip: {
          show:true,
          triggerOn: "mousemove",
          trigger: 'item',
          formatter: function(a, b) {
            console.log('nnnnnnnnnnnnnnnnnnnn')
            console.log(a.data)
            console.log('bbbbbbbbbbbbbbbbbbbbb')
            console.log(b)
            return (

              `${a['name']}   `
            )
          }
        },*/
        bmap: {
          center: [108.951927,34.278213],
          zoom: 10,
          roam: false,
          mapStyle: {
            styleJson: [{
              'featureType': 'water',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'land',
              'elementType': 'all',
              'stylers': {
                'color': '#f3f3f3'
              }
            }, {
              'featureType': 'railway',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'highway',
              'elementType': 'all',
              'stylers': {
                'color': '#fdfdfd'
              }
            }, {
              'featureType': 'highway',
              'elementType': 'labels',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'geometry',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'geometry.fill',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'poi',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'green',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'subway',
              'elementType': 'all',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'manmade',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'local',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'arterial',
              'elementType': 'labels',
              'stylers': {
                'visibility': 'off'
              }
            }, {
              'featureType': 'boundary',
              'elementType': 'all',
              'stylers': {
                'color': '#fefefe'
              }
            }, {
              'featureType': 'building',
              'elementType': 'all',
              'stylers': {
                'color': '#d1d1d1'
              }
            }, {
              'featureType': 'label',
              'elementType': 'labels.text.fill',
              'stylers': {
                'color': '#999999'
              }
            }]
          }
        },
        series : [
          {
            name: '站点',
            type: 'effectScatter',
            coordinateSystem: 'bmap',
            data: this.convertData(this.data.sort(function (a, b) {
              return b.value - a.value;
            }).slice(0, 6)),
            symbolSize:10,
            encode: {
              value: 2
            },
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              formatter: '{b}',
              position: 'right',
              show: true
            },
            itemStyle: { //散点的样式
              shadowBlur: 10,
              shadowColor: '#FFE228',
              color :'#FFE228',
            },
            zlevel: 1
          }
        ]

      };

      mapChart.setOption(option,true)
      var bmap = mapChart.getModel().getComponent('bmap').getBMap();
      // bmap.setMapStyleV2({ styleJson:  mapjson });
      bmap.setMapStyle({ style:  'midnight' });



    }

  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer);
  },
  props: ['show'],
  watch: {
    // 'show'(val) {
    //   this.drawChinaMap()
    // }
  },
  ready(){
    // console.log('----------------------------------ready+this.show')
    // console.log(this.show)
    // this.$nextTick(() => {
    //   MP('pUKyfRZf0LhEAQ2kdpUGOHx6i0uLVnwn').then(() => {
    //     console.log('=============================')
    //     this.drawChinaMap()
    //   })
    // })
    /*setTimeout(() => {
      this.drawChinaMap()
    }, 5000)*/

  }
};
</script>
<style scoped>
 .ec-extension-bmap{
   margin-top: -330px;
 }
</style>
