用 echarts 开发地图、点击展示自定义信息框

1、下载所需地市的json   链接：DataV.GeoAtlas地理小工具系列 

      在右侧输入需要的名称，然后下载json文件到本地

2、在html 中准备容器，并设置宽高

<div id="mapContent">

    <div ref="mapChart" style="width:100%;height:100%;margin-bottom: 0" />

</div>

#mapContent {

  width: 100%;

  height: 100%;

}

3、导入echarts 和 json 文件

import * as echarts from 'echarts'

import json_150000 from '@/static/neimenggu/county/150000.json'

4、处理数据

//data 数据 

data() {

    return {

      charts: null,

      mapjson: json_150000,

      codeToJson: {

        '150000': json_150000

      },

     mapOptions:{},

      cityName: {

        呼和浩特市: {

             value: '',

             jcz: '',

             kc: '',

             fwz: ''

        },

        ...................

    

      },

     cityCodeAndName:{

           '150100000000' :'呼和浩特市',

           '150700000000' :'呼伦贝尔市',

            '150200000000' :'包头市',

             ...................................

    }

}

5、初始化方法

   initEcharts(areaCode) {

      const name = 'json_' + areaCode

      const cityName = this.cityName

      const mapjson = this.codeToJson[areaCode]

      if (this.charts) {

        this.charts.clear()

      } else {

        this.charts = echarts.init(this.$refs.mapChart)

      }

      const top = 28

      const zoom = 1.2 //地图缩放层级（控制地图大小）

      const option = {

        backgroundColor: 'rgba(0,0,0,0)',

        tooltip: {

          show: false

        },

        legend: {

          show: false

        },

        grid: {

          height: '100%'

        },

        geo: {

          map: name,

          roam: false,

          selectedMode: false, // 是否允许选中多个区域

          zoom: zoom,

          top: top,

          show: false

        },

        series: [

          {

            name: 'MAP',

            type: 'map',

            map: name,

            label: {

              show: false,

              color: '#fff'

            },

            showLegendSymbol: false,

            data: [],

            selectedMode: 'single', // 是否允许选中多个区域

            zoom: zoom,

            geoIndex: 1,

            top: top,

            tooltip: {

              show: true,

              formatter: function(params) {

                return params.name + '(' + cityName[params.name].value + ')'

              }, //内容

              backgroundColor: 'rgba(0,0,0,.6)', //提示框样式

              borderColor: 'rgba(147, 235, 248, .8)',

              textStyle: {

                color: '#FFF'

              },

              triggerOn: 'click'

            },

            emphasis: {

              //划过区域时，样式设置

              label: {

                show: false //是否显示区域名称（在面积中）

              },

              itemStyle: {

                areaColor: '#389BB7', //区域的面积颜色

                borderWidth: 1 //区域边框

              }

            },

            select: {

              disabled: true

            },

            //区域样式设置

            itemStyle: {

              borderColor: '#2084bc',

              borderWidth: 2,

              areaColor: {

                type: 'radial',

                x: 0.5,

                y: 0.5,

                r: 0.8,

                colorStops: [

                  {

                    offset: 0,

                    color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色

                  },

                  {

                    offset: 1,

                    color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色

                  }

                ],

                globalCoord: false // 缺为 false

              },

              shadowOffsetX: -2,

              shadowOffsetY: 2,

              shadowBlur: 10

            }

          }

        ]

      }

      this.mapOptions = option

      echarts.registerMap(name, mapjson)

      //处理数据

      const jsonData = this.getGeoCoordMap(mapjson)

      this.mapOptions.series[0].data = jsonData

      const that = this

      //给区域添加点击事件

      this.charts.on('click', function(params) {

        //先移除上个标签

        const popDiv = document.getElementById('popup')

        if (popDiv) {

          document.getElementById('mapContent').removeChild(popDiv)

        }

        // 自定义弹框

        var popup = document.createElement('div')

        popup.id = 'popup'

        popup.style.position = 'absolute'

        popup.style.left = params.event.event.clientX - 90 + 'px'

        popup.style.top = params.event.offsetY - 120 + 'px'

        popup.style.backgroundColor = '#22312f'

        popup.style.zIndex = 999

        popup.style.padding = '0 20px'

        popup.style.borderRadius = '10px'

        popup.innerHTML =

          '<div id="nmgInfoWindow">' +

          '<div class="title">' +

          params.data.name +

          '详情<i class="el-icon-close closebt" id = "closeBtn"></i></div>' +

          '<div class="items"> <span style="color:#62b2bc;">项目一</span><span>' +

          '<span style="color:#62b2bc;">' +

          cityName[params.data.name].jcz +

          '</span>' +

          '<i class="el-icon-arrow-right toDetail" style="color:#62b2bc;"></i></span>' +

          '</div>' +

          '<div class="items"> <span style="color:#62b2bc;">项目二</span><span>' +

          '<span style="color:#62b2bc;">' +

          cityName[params.data.name].kc +

          '</span>' +

          '<i class="el-icon-arrow-right toDetail" style="color:#62b2bc;"></i></span>' +

          '</div>' +

          '<div class="items"> <span style="color:#62b2bc;">项目三</span><span>' +

          '<span style="color:#62b2bc;">' +

          cityName[params.data.name].fwz +

          '</span>' +

          '<i class="el-icon-arrow-right toDetail " style="color:#62b2bc;"></i></span>' +

          '</div>' +

          '</div>'

        //添加到页面上

        document.getElementById('mapContent').appendChild(popup)

        //给自定义弹框中添加关闭事件

        const closeButton = document.querySelector('#closeBtn')

        closeButton.addEventListener('click', function() {

          const popDiv = document.getElementById('popup')

          if (popDiv) {

            document.getElementById('mapContent').removeChild(popDiv)

          }

        })

        //给自定义弹框中的按钮跳转事件

        const detailButton = document.querySelectorAll('.toDetail')

        detailButton.forEach((item, index) => {

          item.addEventListener('click', function() {

             console.log('点击事件',that)

          })

        })

      })

      this.charts.setOption(option)

    },

 getGeoCoordMap(mapjson) {

      const mapFeatures = mapjson.features

      const cityCenter = {}

      mapFeatures.map((item) => {

        cityCenter[item.properties.name] = item.properties.centroid || item.properties.center || []

      })

      const newData = []

      mapFeatures.map((item) => {

        if (cityCenter[item.properties.name]) {

          newData.push({

            name: item.properties.name,

            value: cityCenter[item.properties.name],

            adcode: item.properties.adcode

          })

        }

      })

      return newData

    }

6、结果