使用echarts来显示世界地图和全国地图，并且可以下钻层级

使用的技术

vue3.0 + vite + ts + echarts

现有的功能

1. 全球地图和全国地图、省地图、市级地图显示
2. 展示数据
3. 可以从全球下钻地图
4. 点击右键返回上一级
5. 全球地图缩放后，下钻下一级地图位置保持在中心

遇到的问题解决

1. vue3.0 + vite 我没办法动态的引用地图资源，我本地是用axios来引用，打包后路径不对，因为比较急我就用最笨的方法，把所有省的json都引进来，还好只有3个省，不然累死，先完成任务再优化。代码如下，我帮你们做了苦力，你们直接copy来替换吧。
2. 全球地图缩放后，下钻下一级地图位置保持在中心，

//   在点击一级地图时，将一级地图的地图绘制清空。重新绘制 就可以每次都居中显示
  chart.clear()
1
2

 //动态引入地图数据
  axios.get(`/src/assets/map/geometryProvince/${id}.json`).then((res) => {
//       resolve(res.data)
//     })
1
2
3
4

import xinjiang from '/@/assets/map/geometryProvince/xinjiang.json'
import shanghai from '/@/assets/map/geometryProvince/shanghai.json'
import hebei from '/@/assets/map/geometryProvince/hebei.json'
import shanxi from '/@/assets/map/geometryProvince/shanxi.json'
import neimenggu from '/@/assets/map/geometryProvince/neimenggu.json'
import liaoning from '/@/assets/map/geometryProvince/liaoning.json'
import jilin from '/@/assets/map/geometryProvince/jilin.json'
import heilongjiang from '/@/assets/map/geometryProvince/heilongjiang.json'
import jiangsu from '/@/assets/map/geometryProvince/jiangsu.json'
import zhejiang from '/@/assets/map/geometryProvince/zhejiang.json'
import anhui from '/@/assets/map/geometryProvince/anhui.json'
import fujian from '/@/assets/map/geometryProvince/fujian.json'
import jiangxi from '/@/assets/map/geometryProvince/jiangxi.json'
import shandong from '/@/assets/map/geometryProvince/shandong.json'
import henan from '/@/assets/map/geometryProvince/henan.json'
import hubei from '/@/assets/map/geometryProvince/hubei.json'
import hunan from '/@/assets/map/geometryProvince/hunan.json'
import guangdong from '/@/assets/map/geometryProvince/guangdong.json'
import guangxi from '/@/assets/map/geometryProvince/guangxi.json'
import hainan from '/@/assets/map/geometryProvince/hainan.json'
import sichuan from '/@/assets/map/geometryProvince/sichuan.json'
import guizhou from '/@/assets/map/geometryProvince/guizhou.json'
import yunnan from '/@/assets/map/geometryProvince/yunnan.json'
import xizang from '/@/assets/map/geometryProvince/xizang.json'
import shanxi1 from '/@/assets/map/geometryProvince/shanxi1.json'
import gansu from '/@/assets/map/geometryProvince/gansu.json'
import qinghai from '/@/assets/map/geometryProvince/qinghai.json'
import ningxia from '/@/assets/map/geometryProvince/ningxia.json'
import beijing from '/@/assets/map/geometryProvince/beijing.json'
import tianjin from '/@/assets/map/geometryProvince/tianjin.json'
import chongqing from '/@/assets/map/geometryProvince/chongqing.json'
import xianggang from '/@/assets/map/geometryProvince/xianggang.json'
import aomen from '/@/assets/map/geometryProvince/aomen.json'
import taiwan from '/@/assets/map/geometryProvince/taiwan.json'
import axios from 'axios'

//地图数据
let jsonMap:any = {
    上海市:shanghai,
    河北:hebei,
    山西:shanxi,
    内蒙古:neimenggu,
    辽宁:liaoning,
    吉林:jilin,
    黑龙江:heilongjiang,
    江苏:jiangsu,
    浙江:zhejiang,
    安徽:anhui,
    福建:fujian,
    江西:jiangxi,
    山东:shandong,
    河南:henan,
    湖北:hubei,
    湖南:hunan,
    广东:guangdong,
    广西:guangxi,
    海南:hainan,
    四川:sichuan,
    贵州:guizhou,
    云南:yunnan,
    西藏:xizang,
    陕西:shanxi1,
    甘肃:gansu,
    青海:qinghai,
    宁夏:ningxia,
    新疆:xinjiang,
    北京市:beijing,
    天津市:tianjin,
    重庆市:chongqing,
    香港:xianggang,
    澳门:aomen,
    台湾:taiwan,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

总结

实属不易，显示地图倒是很容易，但是完善细节和用户体验不容易，得一步一步的摸索，不断的百度，看源码的方法来解决。
总之你百度20个肯定能看到我，我也会把我百度的有直接的博客放在下面，看到我就给我留言一起交流，共同进步。

参考内容

1. https://www.jianshu.com/p/046a7f413630
2. https://datav.aliyun.com/portal/school/atlas/area_selector
3. https://www.jianshu.com/p/c29462087134
4. http://geojson.io/#map=2/20.1/0.0
5. https://blog.csdn.net/hsany330/article/details/118701178
6. https://www.csdn.net/tags/NtzaggzsNDQyOTgtYmxvZwO0O0OO0O0O.html
7. https://blog.csdn.net/weixin_49668076/article/details/119444131
8. https://www.codenong.com/cs106556136/

直接来源码，地球资源包我上传到资源，有需要自己下。

源码资源下载

主要源码

<template>
  <div class="mb-2">
    <el-radio-group
      v-model="choosePosition"
      size="small"
      @change.native="changePosition"
      class="opration-left"
    >
      <el-radio :label="1">选项1</el-radio>
      <el-radio :label="2">选项1</el-radio>
      <el-radio :label="3">选项1</el-radio>
      <el-radio :label="4">选项1</el-radio>
    </el-radio-group>
    <div
      ref="qualityMap"
      style="width: 100%; height: 660px; border: 1px solid #ddd"
    ></div>
    <el-button
      @click.native="backToTop"
      v-if="currentLevel != 0"
      class="el-button"
      >返回上一级</el-button
    >
  </div>
</template>

<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, ref } from 'vue'
import * as echarts from 'echarts'
import chinaJson from '/@/assets/map/china.json'
import china from '/@/assets/map/china.json'
import worldJson from '/@/assets/map/world.json'

import xinjiang from '/@/assets/map/geometryProvince/xinjiang.json'
import shanghai from '/@/assets/map/geometryProvince/shanghai.json'
import hebei from '/@/assets/map/geometryProvince/hebei.json'
import shanxi from '/@/assets/map/geometryProvince/shanxi.json'
import neimenggu from '/@/assets/map/geometryProvince/neimenggu.json'
import liaoning from '/@/assets/map/geometryProvince/liaoning.json'
import jilin from '/@/assets/map/geometryProvince/jilin.json'
import heilongjiang from '/@/assets/map/geometryProvince/heilongjiang.json'
import jiangsu from '/@/assets/map/geometryProvince/jiangsu.json'
import zhejiang from '/@/assets/map/geometryProvince/zhejiang.json'
import anhui from '/@/assets/map/geometryProvince/anhui.json'
import fujian from '/@/assets/map/geometryProvince/fujian.json'
import jiangxi from '/@/assets/map/geometryProvince/jiangxi.json'
import shandong from '/@/assets/map/geometryProvince/shandong.json'
import henan from '/@/assets/map/geometryProvince/henan.json'
import hubei from '/@/assets/map/geometryProvince/hubei.json'
import hunan from '/@/assets/map/geometryProvince/hunan.json'
import guangdong from '/@/assets/map/geometryProvince/guangdong.json'
import guangxi from '/@/assets/map/geometryProvince/guangxi.json'
import hainan from '/@/assets/map/geometryProvince/hainan.json'
import sichuan from '/@/assets/map/geometryProvince/sichuan.json'
import guizhou from '/@/assets/map/geometryProvince/guizhou.json'
import yunnan from '/@/assets/map/geometryProvince/yunnan.json'
import xizang from '/@/assets/map/geometryProvince/xizang.json'
import shanxi1 from '/@/assets/map/geometryProvince/shanxi1.json'
import gansu from '/@/assets/map/geometryProvince/gansu.json'
import qinghai from '/@/assets/map/geometryProvince/qinghai.json'
import ningxia from '/@/assets/map/geometryProvince/ningxia.json'
import beijing from '/@/assets/map/geometryProvince/beijing.json'
import tianjin from '/@/assets/map/geometryProvince/tianjin.json'
import chongqing from '/@/assets/map/geometryProvince/chongqing.json'
import xianggang from '/@/assets/map/geometryProvince/xianggang.json'
import aomen from '/@/assets/map/geometryProvince/aomen.json'
import taiwan from '/@/assets/map/geometryProvince/taiwan.json'
import axios from 'axios'

//地图数据
let jsonMap:any = {
    上海市:shanghai,
    河北:hebei,
    山西:shanxi,
    内蒙古:neimenggu,
    辽宁:liaoning,
    吉林:jilin,
    黑龙江:heilongjiang,
    江苏:jiangsu,
    浙江:zhejiang,
    安徽:anhui,
    福建:fujian,
    江西:jiangxi,
    山东:shandong,
    河南:henan,
    湖北:hubei,
    湖南:hunan,
    广东:guangdong,
    广西:guangxi,
    海南:hainan,
    四川:sichuan,
    贵州:guizhou,
    云南:yunnan,
    西藏:xizang,
    陕西:shanxi1,
    甘肃:gansu,
    青海:qinghai,
    宁夏:ningxia,
    新疆:xinjiang,
    北京市:beijing,
    天津市:tianjin,
    重庆市:chongqing,
    香港:xianggang,
    澳门:aomen,
    台湾:taiwan,
}



let currentLevel = ref(0) //0-全球 1 全国下省份, 2 省份下市区  3 县区
let currentClick:any = null

//单选条件
const choosePosition = ref(1)

//切换条件
const changePosition = (label: any) => {
  //加载数据
}

let currentCityList = []
const qualityMap = ref()
let chart: any = ref()

onMounted(() => {
  chart = echarts.init(qualityMap.value as unknown as HTMLElement)
  initEcharts()
})
onUnmounted(() => {
  chart.dispose()
})
// 全球地域中文映射
let nameMap = {
  Canada: '加拿大',
  Turkmenistan: '土库曼斯坦',
  'Saint Helena': '圣赫勒拿',
  'Lao PDR': '老挝',
  Lithuania: '立陶宛',
  Cambodia: '柬埔寨',
  Ethiopia: '埃塞俄比亚',
  'Faeroe Is.': '法罗群岛',
  Swaziland: '斯威士兰',
  Palestine: '巴勒斯坦',
  Belize: '伯利兹',
  Argentina: '阿根廷',
  Bolivia: '玻利维亚',
  Cameroon: '喀麦隆',
  'Burkina Faso': '布基纳法索',
  Aland: '奥兰群岛',
  Bahrain: '巴林',
  'Saudi Arabia': '沙特阿拉伯',
  'Fr. Polynesia': '法属波利尼西亚',
  'Cape Verde': '佛得角',
  'W. Sahara': '西撒哈拉',
  Slovenia: '斯洛文尼亚',
  Guatemala: '危地马拉',
  Guinea: '几内亚',
  'Dem. Rep. Congo': '刚果（金）',
  Germany: '德国',
  Spain: '西班牙',
  Liberia: '利比里亚',
  Netherlands: '荷兰',
  Jamaica: '牙买加',
  'Solomon Is.': '所罗门群岛',
  Oman: '阿曼',
  Tanzania: '坦桑尼亚',
  'Costa Rica': '哥斯达黎加',
  'Isle of Man': '曼岛',
  Gabon: '加蓬',
  Niue: '纽埃',
  Bahamas: '巴哈马',
  'New Zealand': '新西兰',
  Yemen: '也门',
  Jersey: '泽西岛',
  Pakistan: '巴基斯坦',
  Albania: '阿尔巴尼亚',
  Samoa: '萨摩亚',
  'Czech Rep.': '捷克',
  'United Arab Emirates': '阿拉伯联合酋长国',
  Guam: '关岛',
  India: '印度',
  Azerbaijan: '阿塞拜疆',
  'N. Mariana Is.': '北马里亚纳群岛',
  Lesotho: '莱索托',
  Kenya: '肯尼亚',
  Belarus: '白俄罗斯',
  Tajikistan: '塔吉克斯坦',
  Turkey: '土耳其',
  Afghanistan: '阿富汗',
  Bangladesh: '孟加拉国',
  Mauritania: '毛里塔尼亚',
  'Dem. Rep. Korea': '朝鲜',
  'Saint Lucia': '圣卢西亚',
  'Br. Indian Ocean Ter.': '英属印度洋领地',
  Mongolia: '蒙古',
  France: '法国',
  'Cura?ao': '库拉索岛',
  'S. Sudan': '南苏丹',
  Rwanda: '卢旺达',
  Slovakia: '斯洛伐克',
  Somalia: '索马里',
  Peru: '秘鲁',
  Vanuatu: '瓦努阿图',
  Norway: '挪威',
  Malawi: '马拉维',
  Benin: '贝宁',
  'St. Vin. and Gren.': '圣文森特和格林纳丁斯',
  Korea: '韩国',
  Singapore: '新加坡',
  Montenegro: '黑山共和国',
  'Cayman Is.': '开曼群岛',
  Togo: '多哥',
  China: '中国',
  'Heard I. and McDonald Is.': '赫德岛和麦克唐纳群岛',
  Armenia: '亚美尼亚',
  'Falkland Is.': '马尔维纳斯群岛（福克兰）',
  Ukraine: '乌克兰',
  Ghana: '加纳',
  Tonga: '汤加',
  Finland: '芬兰',
  Libya: '利比亚',
  'Dominican Rep.': '多米尼加',
  Indonesia: '印度尼西亚',
  Mauritius: '毛里求斯',
  'Eq. Guinea': '赤道几内亚',
  Sweden: '瑞典',
  Vietnam: '越南',
  Mali: '马里',
  Russia: '俄罗斯',
  Bulgaria: '保加利亚',
  'United States': '美国',
  Romania: '罗马尼亚',
  Angola: '安哥拉',
  Chad: '乍得',
  'South Africa': '南非',
  Fiji: '斐济',
  Liechtenstein: '列支敦士登',
  Malaysia: '马来西亚',
  Austria: '奥地利',
  Mozambique: '莫桑比克',
  Uganda: '乌干达',
  Japan: '日本',
  Niger: '尼日尔',
  Brazil: '巴西',
  Kuwait: '科威特',
  Panama: '巴拿马',
  Guyana: '圭亚那',
  Madagascar: '马达加斯加',
  Luxembourg: '卢森堡',
  'American Samoa': '美属萨摩亚',
  Andorra: '安道尔',
  Ireland: '爱尔兰',
  Italy: '意大利',
  Nigeria: '尼日利亚',
  'Turks and Caicos Is.': '特克斯和凯科斯群岛',
  Ecuador: '厄瓜多尔',
  'U.S. Virgin Is.': '美属维尔京群岛',
  Brunei: '文莱',
  Australia: '澳大利亚',
  Iran: '伊朗',
  Algeria: '阿尔及利亚',
  'El Salvador': '萨尔瓦多',
  "C?te d'Ivoire": '科特迪瓦',
  Chile: '智利',
  'Puerto Rico': '波多黎各',
  Belgium: '比利时',
  Thailand: '泰国',
  Haiti: '海地',
  Iraq: '伊拉克',
  'S?o Tomé and Principe': '圣多美和普林西比',
  'Sierra Leone': '塞拉利昂',
  Georgia: '格鲁吉亚',
  Denmark: '丹麦',
  Philippines: '菲律宾',
  'S. Geo. and S. Sandw. Is.': '南乔治亚岛和南桑威奇群岛',
  Moldova: '摩尔多瓦',
  Morocco: '摩洛哥',
  Namibia: '纳米比亚',
  Malta: '马耳他',
  'Guinea-Bissau': '几内亚比绍',
  Kiribati: '基里巴斯',
  Switzerland: '瑞士',
  Grenada: '格林纳达',
  Seychelles: '塞舌尔',
  Portugal: '葡萄牙',
  Estonia: '爱沙尼亚',
  Uruguay: '乌拉圭',
  'Antigua and Barb.': '安提瓜和巴布达',
  Lebanon: '黎巴嫩',
  Uzbekistan: '乌兹别克斯坦',
  Tunisia: '突尼斯',
  Djibouti: '吉布提',
  Greenland: '格陵兰',
  'Timor-Leste': '东帝汶',
  Dominica: '多米尼克',
  Colombia: '哥伦比亚',
  Burundi: '布隆迪',
  'Bosnia and Herz.': '波斯尼亚和黑塞哥维那',
  Cyprus: '塞浦路斯',
  Barbados: '巴巴多斯',
  Qatar: '卡塔尔',
  Palau: '帕劳',
  Bhutan: '不丹',
  Sudan: '苏丹',
  Nepal: '尼泊尔',
  Micronesia: '密克罗尼西亚',
  Bermuda: '百慕大',
  Suriname: '苏里南',
  Venezuela: '委内瑞拉',
  Israel: '以色列',
  'St. Pierre and Miquelon': '圣皮埃尔和密克隆群岛',
  'Central African Rep.': '中非',
  Iceland: '冰岛',
  Zambia: '赞比亚',
  Senegal: '塞内加尔',
  'Papua New Guinea': '巴布亚新几内亚',
  'Trinidad and Tobago': '特立尼达和多巴哥',
  Zimbabwe: '津巴布韦',
  Jordan: '约旦',
  Gambia: '冈比亚',
  Kazakhstan: '哈萨克斯坦',
  Poland: '波兰',
  Eritrea: '厄立特里亚',
  Kyrgyzstan: '吉尔吉斯斯坦',
  Montserrat: '蒙特塞拉特',
  'New Caledonia': '新喀里多尼亚',
  Macedonia: '马其顿',
  Paraguay: '巴拉圭',
  Latvia: '拉脱维亚',
  Hungary: '匈牙利',
  Syria: '叙利亚',
  Honduras: '洪都拉斯',
  Myanmar: '缅甸',
  Mexico: '墨西哥',
  Egypt: '埃及',
  Nicaragua: '尼加拉瓜',
  Cuba: '古巴',
  Serbia: '塞尔维亚',
  Comoros: '科摩罗',
  'United Kingdom': '英国',
  'Fr. S. Antarctic Lands': '南极洲',
  Congo: '刚果（布）',
  Greece: '希腊',
  'Sri Lanka': '斯里兰卡',
  Croatia: '克罗地亚',
  Botswana: '博茨瓦纳',
  'Siachen Glacier': '锡亚琴冰川地区',
  'São Tomé and Principe': '圣多美及普林西比',
}

//地图展示的数据
let showData = [
  { name: '北京市', value: 9999 },
  { name: '中国', value: 9999 },
  { name: 'China', value: 9999 },
  { name: '天津市', value: Math.round(Math.random() * 100) },
  { name: '上海', value: Math.round(Math.random() * 100) },
  { name: '重庆市', value: Math.round(Math.random() * 100) },
  { name: '河北', value: Math.round(Math.random() * 100) },
  { name: '河南', value: Math.round(Math.random() * 100) },
  { name: '云南', value: Math.round(Math.random() * 100) },
  { name: '辽宁', value: Math.round(Math.random() * 100) },
  { name: '黑龙江', value: Math.round(Math.random() * 100) },
  { name: '湖南', value: Math.round(Math.random() * 100) },
  { name: '安徽', value: Math.round(Math.random() * 100) },
  { name: '山东', value: Math.round(Math.random() * 100) },
  { name: '新疆', value: Math.round(Math.random() * 100) },
  { name: '江苏', value: Math.round(Math.random() * 100) },
  { name: '浙江', value: Math.round(Math.random() * 100) },
  { name: '江西', value: Math.round(Math.random() * 100) },
  { name: '湖北', value: Math.round(Math.random() * 100) },
  { name: '广西', value: Math.round(Math.random() * 100) },
  { name: '甘肃', value: Math.round(Math.random() * 100) },
  { name: '山西', value: Math.round(Math.random() * 100) },
  { name: '内蒙古', value: Math.round(Math.random() * 100) },
  { name: '陕西', value: Math.round(Math.random() * 100) },
  { name: '吉林', value: Math.round(Math.random() * 100) },
  { name: '福建', value: Math.round(Math.random() * 100) },
  { name: '贵州', value: Math.round(Math.random() * 100) },
  { name: '广东', value: Math.round(Math.random() * 100) },
  { name: '青海', value: Math.round(Math.random() * 100) },
  { name: '西藏', value: Math.round(Math.random() * 100) },
  { name: '四川', value: Math.round(Math.random() * 100) },
  { name: '宁夏', value: Math.round(Math.random() * 100) },
  { name: '海南', value: Math.round(Math.random() * 100) },
  { name: '台湾', value: Math.round(Math.random() * 100) },
  { name: '香港', value: Math.round(Math.random() * 100) },
  { name: '澳门', value: Math.round(Math.random() * 100) },
  { name: '成都市', value: 9999 },
  { name: '马祖', value: 9999 },
  { name: '台湾', value: 9999 },
  { name: '那曲地区', value: 9999 },
]

let userParam:any = sessionStorage.getItem("userParam")
let userInfo:any = JSON.parse(userParam);

//请求本地的数据
const requestJsonData = (id:any) => {
    
    // 根据名字来匹配地图数据
    return jsonMap[currentClick]
//   return new Promise((resolve) => {
//     axios.get(`/src/assets/map/geometryProvince/${id}.json`).then((res) => {
//       resolve(res.data)
//     })
//   })
}

const initEcharts = async () => {
  let regionsList = []
//   在点击一级地图时，将一级地图的地图绘制清空。重新绘制 就可以每次都居中显示
  chart.clear()

  //全球
  if (currentLevel.value == 0) {
    regionsList = worldJson.features.map((item) => ({
      name: item.properties.name,
      value: 1500,
      type: '全球',
      itemStyle: {
        color: 'rgba(222, 224, 232, 1)',
        areaColor: 'rgba(222, 224, 232, 1)',
      },
    })) //地图上要显示的区域以及颜色

    let outProvince = [] //数组定义在这里, 可以在地图上去除部分省份 =》 ['江苏', '江西']
    let objMap = {
      ...worldJson,
      features: worldJson.features.filter(
        (item) => !outProvince.includes(item.properties.name)
      ), //这里可以过滤不需要展示省份，可以和regionsList联动使用
    }
    echarts.registerMap('worldJson', objMap) //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
  }

  //全国下省份
  if (currentLevel.value == 1) {
    regionsList = chinaJson.features.map((item) => ({
      name: item.properties.name,
      value: 1500,
      type: '省份',
      itemStyle: {
        color: 'rgba(222, 224, 232, 1)',
        areaColor: 'rgba(222, 224, 232, 1)',
      },
    })) //地图上要显示的区域以及颜色

    let outProvince = [] //数组定义在这里, 可以在地图上去除部分省份 =》 ['江苏', '江西']
    let objMap = {
      ...chinaJson,
      features: chinaJson.features.filter(
        (item) => !outProvince.includes(item.properties.name)
      ), //这里可以过滤不需要展示省份，可以和regionsList联动使用
    }
    echarts.registerMap('china', objMap) //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
  }

  //省份下市区
  if (currentLevel.value == 2) {
    let { id } = china.features.filter(
      (item) => currentClick == item.properties.name
    )[0]?.properties
    //找出  @/core/map/china.json 里面内蒙古id  同事在此路径geometryProvince文件下  id.json就是对应该省份对应的市级数据
    let cityList = await requestJsonData(id)
    
    regionsList = cityList.features.map((item) => ({
      name: item.properties.name,
      type: '城市',
      itemStyle: {
        color: 'rgba(222, 224, 232, 1)',
        areaColor: 'rgba(222, 224, 232, 1)',
      },
    }))
    currentCityList = cityList
    let outCityList = [] //剔除不需要城市
    let objMap = {
      ...china,
      features: cityList.features.filter(
        (item) => !outCityList.includes(item.properties.name)
      ), //这里可以过滤不需要展示城市，可以和regionsList联动使用
    }
    echarts.registerMap('chinaJson', objMap) //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
  }

  //市区下县区
  //   if(currentLevel.value== 3) {
  //     //console.log(currentLevel.value, currentClick, currentCityList)
  //     let { id } = currentCityList.features.filter((item) => currentClick == item.properties.name)[0].properties
  //     //console.log(id, currentCityList.features.filter((item) => currentClick == item.properties.name)[0])
  //     let areaList = require(`@/core/map/geometryCouties/${id}00.json`) //获取区县数据
  //     //console.log(areaList)
  //     regionsList =  areaList.features.map((item) => ({
  //       name: item.properties.name,
  //       type: '县区',
  //       itemStyle: {
  //         color: 'rgba(222, 224, 232, 1)',
  //         areaColor: 'rgba(222, 224, 232, 1)'
  //       }
  //     }))

  //     let outAreaList = [] //剔除不需要县区
  //     let objMap = {
  //       ...chinaJson,
  //       features: areaList.features.filter((item) => !outAreaList.includes(item.properties.name)) //这里可以过滤不需要展示县区，可以和regionsList联动使用
  //     }
  //     echarts.registerMap('chinaJson', objMap)  //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
  //   }

  let option = {
    tooltip: {
      show: true,
      triggerOn: 'mousemove',
      formatter: function (params, ticket, callback) {
        let value = params?.data?.value || 0
        return value
      },
    }, // 鼠标移到图里面的浮动提示框
    visualMap: {
      min: 0,
      max: 1500,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'], //取值范围的文字
      inRange: {
        color: ['#e0ffff', '#006edd'], //取值范围的颜色
      },
      show: true, //图注
    },
    // geo: {
    //      type: 'map',
    //   zlevel:2,//geo显示级别，默认是0
    //   map: 'chinaJson', //china可以显示右下加南海诸岛，别的名称无法显示
    //   roam: false,
    //   zoom: 1.2,
    //   aspectScale: 0.8, // 拉伸地图 值为0-1
    //   regions: regionsList,
    //   label: {
    //     show: true,
    //     // color: '#000',
    //   },
    //   emphasis: {
    //     // 设置鼠标移上去hover效果
    //     show: true,
    //     label: {
    //     //   color: '#000',
    //         show: true,
    //       fontSize: '40',
    //         fontWeight: 'bold',
    //     },
    //   },
    // },
    series: [
      {
        type: 'map',
        map:
          currentLevel.value == 0
            ? 'worldJson'
            : currentLevel.value == 1
            ? 'china'
            : currentLevel.value == 2
            ? 'chinaJson'
            : '', //显示china时候才有南海渚岛
        geoIndex: 0,
        label: {
          show: true,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '40',
            fontWeight: 'bold',
          },
        },
        zoom: 1.2,
        roam: currentLevel.value == 0 ? true : true,
        scaleLimit: {
          // 缩放的极限控制
          min: 0.5,
          max: 6,
        },
        data: showData,
        nameMap: currentLevel.value == 0 ? nameMap : {},
      },
    ],
    dataZoom: { // 放大和缩放
      type: 'inside'
    },
  }

  chart.setOption(option)
  chart.off('click') //解决点击地图会触发两次问题
  chart.off('contextmenu') //解决点击地图会触发两次问题
  //禁用浏览器的右键事件
  document.oncontextmenu = function () {
    return false
  }
  chart.on('click', (params) => {
    if (currentLevel.value == 2) {
      return
    }
    if (currentLevel.value == 0 && params.name != '中国') {
      return
    }

    if (params.name == '南海诸岛') {
      return
    }
    currentLevel.value += 1
    currentClick = params.name
 
    initEcharts() //县区下没有别的级别
  })
  chart.on('contextmenu', (params) => {
    if (currentLevel.value == 0) {
      return
    }
    currentLevel.value -= 1
    currentClick = params.name
    initEcharts()
  })
}

const backToTop = () => {
  if (currentLevel.value == 0) {
    return
  }
  currentLevel.value -= 1
  initEcharts()
}

defineExpose({
    changePosition
})
</script>

<style lang="postcss" scoped>
.opration-left {
  z-index: 9999;
  position: absolute;
  left: 50px;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: unset;
}

.el-button {
  position: absolute;
  left: 220px;
  top: 20px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654