使用echarts来显示世界地图和全国地图，并且可以下钻层级
2024-05-12 18:18:04
使用echarts来显示世界地图和全国地图，并且可以下钻层级
- 使用的技术
- 现有的功能
- 遇到的问题解决
- 总结
- 参考内容
- 直接来源码，地球资源包我上传到资源，有需要自己下。
- 主要源码
使用的技术
vue3.0 + vite + ts + echarts
现有的功能
- 全球地图和全国地图、省地图、市级地图显示
- 展示数据
- 可以从全球下钻地图
- 点击右键返回上一级
- 全球地图缩放后，下钻下一级地图位置保持在中心
遇到的问题解决
- vue3.0 + vite 我没办法动态的引用地图资源，我本地是用axios来引用，打包后路径不对，因为比较急我就用最笨的方法，把所有省的json都引进来，还好只有3个省，不然累死，先完成任务再优化。代码如下，我帮你们做了苦力，你们直接copy来替换吧。
- 全球地图缩放后，下钻下一级地图位置保持在中心，
// 在点击一级地图时，将一级地图的地图绘制清空。重新绘制 就可以每次都居中显示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-groupv-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><divref="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 = cityListlet 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 || 0return 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 += 1currentClick = params.nameinitEcharts() //县区下没有别的级别})chart.on('contextmenu', (params) => {if (currentLevel.value == 0) {return}currentLevel.value -= 1currentClick = params.nameinitEcharts()})
}const backToTop = () => {if (currentLevel.value == 0) {return}currentLevel.value -= 1initEcharts()
}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>使用echarts来显示世界地图和全国地图，并且可以下钻层级相关推荐
- 解决echarts在平移和缩放中国地图后，下钻到下一级具体省份地图时生成的地图不在容器中间，会跑到容器外面去。
问题: echart地图三级下钻地图在平移和缩放后,点击到省,由于中心点的偏移,该省市区地图跑到容器以外的地方去了,导致新生成的地图看不见 解决方法: 后来发现,是重新绘制图表的时候需要: myCha ...
- echarts+vue实现简单的中国地图且数据下钻（简洁适合小白版）
首先,在实现地图之前,需要实现地图的json文件(包含各省份和整个中国地图),文件可从阿里云可视化数据平台下载网址:http://datav.aliyun.com/portal/school/atla ...
- echarts全国地图只显示南海诸岛问题
在使用百度开源的可视化工具echarts时,用到中国地图,参照官方文档用此段代码 value = [155, 10, 66, 78, 33, 80, 190, 53, 49.6]attr = [&qu ...
- 微信小程序使用echarts显示全国地图
首先可以看一下echarts官方的实例 也可以直接使用我参照了官方实例的方法: 1.下载echarts小程序组件并放置到具体项目 下载地址 将项目拉到本地之后,找到文件中的 ec-canvas 文件夹 ...
- Echarts使用二：全国地图与各省市地图联动
===========================更新============================ 介于很多人都找我要相关的js文件,我就传到网上以供大家下载~~ js文件下载地址: ...
- 用echart实现迁徙图，缩放全国地图和省份地图，鼠标悬浮显示相应数据
容器 需要引入echart和引入全国和省份的json数据 需要在mounted()调用画地图方法,数据加载完成 下面就是画地图的配置了,就不一一详细展开说了 全国地图map是"China& ...
- echarts全国地图资源，省份名称居中
echarts 全国地图资源 echarts全国地图资源 全国地图 山东 黑龙江 吉林 辽宁 北京 天津 河北 河南 山西 陕西 内蒙古 安徽 江苏 上海 浙江 福建 台湾 广东 香港 澳门 广西 江 ...
- 基于echarts做全国地图，并且根据不同的飞行方向做调整
需求:地图加载数据,然后有个小飞机,飞的方向,根据经纬度做点位 今天展示两种小飞机飞的方向吧 第一种:往一个中心点飞 先看一个图吧 这里需要全国的省市区经纬度数据,数据比较多,,我把数据放到最后吧,有 ...
- Layuiadmin+Echarts全国地图数据分布
Layuiadmin+Echarts全国地图数据分布 *样式要引用layui的css js Html代码 <div class="layui-col-sm8">< ...
- Vue版本echarts 全国地图geo、geo3D
需求:大屏显示3D全国地图,点击地图上标记连接到指定页面,网上资源多数不是Vue版本的,实现的方式也是由html页面修改为Vue版本 效果展示: 由于图片涉嫌违规,给大家一个自己脑补的 ...
最新文章
- 免费在线制图神器！内置13个类别上百个模板，不上水印支持中文版，GitHub标星已破1万2...
- matlab 离散点差值,散点图的插值方法
- Javascript中最常用的61段经典代码
- Java并发编程—为什么 wait() 方法需要写在 while 里,而不是 if?
- apple默认备份位置_如何将Apple Maps默认设置为步行路线
- 2021年9月24日和学生隆兴的学术讨论
- vmvare连接linux
- (转)正则表达之零宽断言（零宽度正预测先行断言）
- 管理感悟：严重问题与怪问题
- linux 驱动程序 设备模块 设备号 设备文件创建 设备注册 字符驱动设备分析
- C语言基础程序题及答案（适合学完C基础的人练练手）
- 计算机程序设计的史诗TAOCP
- 微信小程序60s倒计时
- mysql 赋权_《MySQL数据库》MySQL用户赋权
- Go游戏服务器开发的一些思考（三十八）：MMO游戏移动同步
- 【JZOJ A组】【NOIP2019模拟】最短路(tiring)
- 西安交通大学计算机张飞导师,航海学院邀请西安交通大学段战胜教授来院作学术报告...
- STM32F207ZG GPIO口学习
- 【附源码】计算机毕业设计SSM某大学校园竞赛管理系统
- matlab构造差商表,牛顿法 代数插值 – 差商表的求法