echarts来显示世界地图和全国地图,并且可以下钻层级
使用echarts来显示世界地图和全国地图,并且可以下钻层级
使用的技术
vue3.0 + vite + ts + echarts
现有的功能
- 全球地图和全国地图、省地图、市级地图显示
- 展示数据
- 可以从全球下钻地图
- 点击右键返回上一级
- 全球地图缩放后,下钻下一级地图位置保持在中心
遇到的问题解决
1.vue3.0 + vite 我没办法动态的引用地图资源,我本地是用axios来引用,打包后路径不对,因为比较急我就用最笨的方法,把所有省的json都引进来,还好只有3个省,不然累死,先完成任务再优化。代码如下,我帮你们做了苦力,你们直接copy来替换吧。
2.全球地图缩放后,下钻下一级地图位置保持在中心,
// 在点击一级地图时,将一级地图的地图绘制清空。重新绘制 就可以每次都居中显示 chart.clear()
//动态引入地图数据 axios.get(`/src/assets/map/geometryProvince/${id}.json`).then((res) => { // resolve(res.data) // })
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, }
总结
实属不易,显示地图倒是很容易,但是完善细节和用户体验不容易,得一步一步的摸索,不断的百度,看源码的方法来解决。
总之你百度20个肯定能看到我,我也会把我百度的有直接的博客放在下面,看到我就给我留言一起交流,共同进步。
参考内容
https://www.jianshu.com/p/046a7f413630
https://datav.aliyun.com/portal/school/atlas/area_selector
https://www.jianshu.com/p/c29462087134
http://geojson.io/#map=2/20.1/0.0
https://blog.csdn.net/hsany330/article/details/118701178
https://www.csdn.net/tags/NtzaggzsNDQyOTgtYmxvZwO0O0OO0O0O.html
https://blog.csdn.net/weixin_49668076/article/details/119444131
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>
标签:map,层级,assets,json,世界地图,geometryProvince,import,echarts,Math From: https://www.cnblogs.com/yayuya/p/17052888.html