echarts地图下钻+平面3D效果+自定义toolTip+自定义立体数据图层

第一步：先获取相关地图json文件，可以通过DataV.GeoAtlas地理小工具系列下载相关geoJson文件，对这些文件做好管理，如下getMap.js

import anyang from '@/assets/map/json/anyang.json'
import hebi from '@/assets/map/json/hebi.json'
import henan from '@/assets/map/json/henan.json'
import jiaozuo from '@/assets/map/json/jiaozuo.json'
import jiyuan from '@/assets/map/json/jiyuan.json'
import kaifeng from '@/assets/map/json/kaifeng.json'
import luohe from '@/assets/map/json/luohe.json'
import luoyang from '@/assets/map/json/luoyang.json'
import nanyang from '@/assets/map/json/nanyang.json'
import pingdingshan from '@/assets/map/json/pingdingshan.json'
import puyang from '@/assets/map/json/puyang.json'
import sanmenxia from '@/assets/map/json/sanmenxia.json'
import shangqiu from '@/assets/map/json/shangqiu.json'
import xinxiang from '@/assets/map/json/xinxiang.json'
import xinyang from '@/assets/map/json/xinyang.json'
import xuchang from '@/assets/map/json/xuchang.json'
import zhengzhou from '@/assets/map/json/zhengzhou.json'
import zhoukou from '@/assets/map/json/zhoukou.json'
import zhumadian from '@/assets/map/json/zhumadian.json'


const mapDict = {
  '周口市':'zhoukou',
  '漯河市':'luohe',
  '商丘市':'shangqiu',
  '许昌市':'xuchang',
  '洛阳市':'luoyang',
  '濮阳市':'puyang',
  '焦作市':'jiaozuo',
  '南阳市':'nanyang',
  '平顶山市':'pingdingshan',
  '新乡市':'xinxiang',
  '开封市':'kaifeng',
  '驻马店市':'zhumadian',
  '郑州市':'zhengzhou',
  '安阳市':'anyang',
  '鹤壁市':'hebi',
  '三门峡市':'sanmenxia',
  '信阳市':'xinyang',
  '济源市':'jiyuan',
}

const mapData = {
  henan,
  zhoukou,
  luohe,
  shangqiu,
  xuchang,
  luoyang,
  puyang,
  jiaozuo,
  nanyang,
  pingdingshan,
  xinxiang,
  kaifeng,
  zhumadian,
  zhengzhou,
  anyang,
  hebi,
  sanmenxia,
  xinyang,
  jiyuan,
}

export function getMap(mapName) {
    const cityName = mapDict[mapName]
    // console.log(cityName);
    if(cityName){
        // console.log('1111',cityName, mapData[cityName]);
        return [cityName, mapData[cityName]]

    }
    // if(!mapName){
    //   return ['henan', henan]
    // }
  return ['henan', henan]
}

第二步：导入到地图组件使用，通过下拉框或者点击地图获取name实现json切换

第三步：平面3D效果使用多个geo图层堆叠layoutCenter平移，下钻切换地图时记得注册地图registerMap

第四步：自定义toolTip比较简单，这里相关背景图使用import导入，关键点是自定义position位置（不自定义会出现安阳定在濮阳的情况），获取地图json中的centorid的坐标（这里的坐标自己可以直接修改位置），通过convertToPixel将地理坐标转换为屏幕坐标，相当好用

第五步：自定义立体图层，直接参考代码吧，网上也找过相关的参考，他们的实现方式是主体柱形部分采用左右多层次渐变的方式，要求上下渐变就不太合适。现在我这里这部分是公司里十年前端大佬手撸的，放心使用

第六步：地图emphsis鼠标移入使geo与series多图层联动触发，使用了鼠标移入移出事件，相关dispatchAction配置项在echarts官网查看

下方完整组件代码：

<template>
  <div class="home">
    <el-select style="width: 164px;" v-model="myCity" size="large" class="mySelect"
               @change="changeOption" :teleported="false">
      <el-option v-for="item in Object.keys(selOption)" :key="item" :value="item" :label="item">
        <div class="myselectItem">
          <span>{
  { item }}</span>
          <img src="../../../assets/imgs/zhzf/itenDing.png" alt=""/>
        </div>
      </el-option>
    </el-select>
    <div class="weather">
      <div class="weatherItem br"><img src="../../../assets/imgs/zhzf/qing.png" alt=""/>晴</div>
      <div class="weatherItem br"><img src="../../../assets/imgs/zhzf/wen.png" alt=""/>17℃</div>
      <div class="weatherItem"><img src="../../../assets/imgs/zhzf/shi.png" alt=""/>18%</div>
    </div>
    <div class="echarts_map" id="main" style="height: 700px;">
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import imgBt from "@/assets/imgs/zhzf/tooltipBt.png";
import imgTooltip from "@/assets/imgs/zhzf/tooltipBorder.png";
import imgItem from "@/assets/imgs/zhzf/tooltipItem.png";
import {getMap} from "./hnMap";
import {mapData} from "@/api/zhzf/index1"

export default {
  data() {
    return {
      myCity: '河南省',
      charts: null,
      params: null,
      selOption: {
        '河南省': [113.83531246, 34.0267395887],
        '三门峡市': [111.181262093, 34.7833199411],
        '信阳市': [114.085490993, 32.1285823075],
        '南阳市': [112.542841901, 33.0114195691],
        '周口市': [114.654101942, 33.6237408181],
        '商丘市': [115.641885688, 34.4385886402],
        '安阳市': [114.351806508, 36.1102667222],
        '平顶山市': [113.300848978, 33.7453014565],
        '开封市': [114.351642118, 34.8018541758],
        '新乡市': [113.912690161, 35.3072575577],
        '洛阳市': [112.147524769, 34.2873678177],
        '漯河市': [114.0460614, 33.5762786885],
        '濮阳市': [115.026627441, 35.7532978882],
        '焦作市': [113.211835885, 35.234607555],
        '许昌市': [113.83531246, 34.0267395887],
        '郑州市': [113.64964385, 34.7566100641],
        '驻马店市': [114.049153547, 32.9831581541],
        '鹤壁市': [114.297769838, 35.7554258742],
      },
      stationSurvey: [],
      mapData: []
    }
  },
  async mounted() {
    this.mapData = await mapData()
    this.$nextTick(() => {
      this.initCharts();
    })
  },
  methods: {
    changeOption() {
      const [mapName, mapJson] = getMap(this.myCity);
      this.go(mapName, mapJson)
      this.$emit('changeCity', this.myCity)
    },
    initCharts() {
      const [mapName, mapJson] = getMap();
      this.go(mapName, mapJson)
    },
    go(mapName, mapJson) {
      let geoCoordMap = {}
      let leftDataLs = [];
      let customerBatteryCityData = []
      mapJson.features.forEach(item => {
        let key = item.properties.name
        let value = item.properties.centroid
        geoCoordMap[key] = value
        if (mapName == 'henan') {