vue2+echarts+百度地图实现轮廓描边

 1.百度地图开放平台申请ak  链接：百度地图开放平台 | 百度地图API SDK | 地图开发

 2.下载"echarts": "^5.4.2"

3.申请以后封装组件

        3.1----根目录组件库都可以map.js

export function MP (ak) {
  const BMap = window.BMap // 这里写一句解决BMap is not defined错误
  return new Promise(function (resolve, reject) {
    if (typeof BMap !== 'undefined') {
      resolve(BMap)
      return true
    }
    window.onBMapCallback = function () {
      resolve(BMap)
    }
    const script = document.createElement('script')
    script.id = 'baiduMap'
    script.type = 'text/javascript'
    script.src = 'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&callback=onBMapCallback'
    script.onerror = reject
    document.head.appendChild(script)
  })
}

        3.2.components=>mapEcharts.vue

<template>
  <!-- 全国地图 -->
  <div style="width:100%;height:100%" id="sxMap"></div>
</template>
<script>
// 引入echarts
import * as echarts from 'echarts'
import 'echarts/extension/bmap/bmap'
import { MP } from '../map.js'
export default {
  data () {
    return {
      rsData: []
    }
  },
  methods: {
    drawMap () {
      var data = [
        { name: '铜川', value: 9 },
        { name: '兴平', value: 19 },
        { name: '西安', value: 29 },
        { name: '泾阳县', value: 39 },
        { name: '商洛', value: 6 },
        { name: '太白县', value: 16 },
        { name: '宝鸡', value: 26 },
        { name: '安康', value: 20 },
        { name: '汉中', value: 30 },
        { name: '渭南', value: 15 },
        { name: '千阳县', value: 3 },
        { name: '城固县', value: 9 }

      ]
      var geoCoordMap = {
        铜川: [109.11, 35.09],
        兴平: [108.17, 34.12],
        西安: [107.40, 33.42],
        泾阳县: [108.84, 34.52],
        商洛: [109.93, 33.86],
        太白县: [107.31, 34.05],
        宝鸡: [107.14, 34.36],
        安康: [109.02, 32.69],
        汉中: [107.01, 33.04],
        渭南: [108.50, 34.13],
        千阳县: [107.13, 34.64],
        城固县: [107.20, 33.09]
      }
      var convertData = function (data) {
        var res = []
        for (var i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          // console.log(geoCoord)
          if (geoCoord) {
            res.push({ name: data[i].name, value: geoCoord.concat(data[i].value) })
          }
        }
        return res
      }
      var option = {
        tooltip: {
          trigger: 'item'
        },
        bmap: { // 百度地图的设置
          center: [108.95, 35.265], // 中心点
          zoom: 8, // 缩放级别
          enableDblclickZoom: false,
          roam: true, // 开启拖拽缩放
          displayOptions: {
            building: false
          },
          mapStyle: { style: 'midnight' }// 深色模式
        },
        series: [
          {
            type: 'effectScatter', // 散点特效图
            coordinateSystem: 'bmap', // 使用百度地图坐标系
            data: convertData(data.sort(function (a, b) {
              return b.value - a.value
            })),
            symbolSize: function (val) {
              return val[2] / 2
            },
            rippleEffect: { brushType: 'stroke' },
            hoverAnimation: true,
            label: { normal: { formatter: '{b}', position: 'right', show: true } },
            itemStyle: { normal: { color: '#ab324e', shadowBlur: 10, shadowColor: '#fff' } },
            zlevel: 1
          }
        ]
      }
      var _this = this
      const mapDiv = document.getElementById('sxMap')
      const myChart = echarts.init(mapDiv)
      myChart.setOption(option)
      myChart.on('click', function (params) {
        // console.log(params, '111')
        _this.$emit('dtTk', params)
        // 发送请求
      })
      // echarts使用bmap后可以通过charts实例来获取里面使用的地图组件
      var map = myChart.getModel().getComponent('bmap').getBMap()
      var BMap = window.BMap
      var bdary = new BMap.Boundary()
      bdary.get('陕西省', function (rs) {
        // 获取行政区域数量
        var count = rs.boundaries.length
        var pointArray = []
        for (var i = 0; i < count; i++) {
          // 建立多边形覆盖物
          var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 5, strokeColor: '#01faf3', fillOpacity: '0.2' })
          // 添加覆盖物
          map.addOverlay(ply)
          pointArray = pointArray.concat(ply.getPath())
        }
      })
    }
  },
  mounted () {
    // this.initHb()
    this.$nextTick(() => {
      var ak = '你的ak'
      MP(ak).then(BMap => { // ak 是在百度地图开发者平台申请的密钥
        this.drawMap() // 画图的函数，这里复制Echarts官方的数据
      })
    })
  }
}
</script>

<style>

</style>

 4.组件调用很简单

<mapEcharts @dtTk="dtTk"></mapEcharts>
<!-- 地图弹框 -->
 <el-dialog class="tkBg" width="50%" height="600px" :visible.sync="dialogTableVisible">
        //写自己的业务显示代码
 </el-dialog>
import mapEcharts from '../components/mapEchart.vue'
@dtTk="dtTk"这个是我增加的弹框点击位置会出现弹框

dtTk(params){
    //点击哪个点哪个数据就会从封装组件的数据传递过来，进行数据请求弹框数据显示即可。
   console.log(params,'数据')
   //请求数据
  //显示弹框
   this.dialogTableVisible = true
},

5.页面效果

 

 这样就完成了，虽然困扰我很多天，不过还是完成啦