vue中基于echart地图功能省级地图下钻和返回、发射线、水波涟漪等功能展示_一挽长夏_高德地图

irpas 02-07 4138

效果图展示-包含水波涟漪、发射线功能效果图点击地市、区县下钻功能

vue项目中main.js

import echarts from 'echarts' import anhui from '../static/commonJs/anHui.json' window.anhuiData = anhui echarts.registerMap('anhui',anhui) Vue.prototype.$echarts = echarts; 页面代码 <template> <div class="orioc-chart-wraper"> <div class="chart" :id="id" ref="chartEle"></div> <div class="fanhui" @click="returnMenu" v-if="mapLevel === 2"> 返回至省级地图 </div> <div class="fanhui" @click="returnMenu" v-if="mapLevel === 3"> 返回至市级地图 </div> </div> </template>

只有引入具体的市、区县地图，才可点击下钻

// 市级地图 import heFei from '../../../../static/commonJs/anhuiMap/anHuiCityMap/heFei.json' import anQing from '../../../../static/commonJs/anhuiMap/anHuiCityMap/anQing.json' import bengBu from '../../../../static/commonJs/anhuiMap/anHuiCityMap/bengBu.json' import chiZhou from '../../../../static/commonJs/anhuiMap/anHuiCityMap/chiZhou.json' import huaiNan from '../../../../static/commonJs/anhuiMap/anHuiCityMap/huaiNan.json' import luAn from '../../../../static/commonJs/anhuiMap/anHuiCityMap/luAn.json' import suZhou from '../../../../static/commonJs/anhuiMap/anHuiCityMap/suZhou.json' import xuanCheng from '../../../../static/commonJs/anhuiMap/anHuiCityMap/xuanCheng.json' // 池州市区县地图 import dongZhi from '../../../../static/commonJs/anhuiMap/chiZhouMap/dongZhi.json' // 东至县 import guiChi from '../../../../static/commonJs/anhuiMap/chiZhouMap/guiChi.json' // 贵池区 import qingYang from '../../../../static/commonJs/anhuiMap/chiZhouMap/qingYang.json' // 青阳县 import shiTai from '../../../../static/commonJs/anhuiMap/chiZhouMap/shiTai.json' // 石台县 // 安庆市区县地图 import daGuan from '../../../../static/commonJs/anhuiMap/anQingMap/daGuan.json' // 大观区 import taiHu from '../../../../static/commonJs/anhuiMap/anQingMap/taiHu.json' // 太湖县 import yiXiu from '../../../../static/commonJs/anhuiMap/anQingMap/yiXiu.json' // 宜秀区 import suSong from '../../../../static/commonJs/anhuiMap/anQingMap/suSong.json' // 宿松县 import yueXi from '../../../../static/commonJs/anhuiMap/anQingMap/yueXi.json' // 岳西县 import huaiNing from '../../../../static/commonJs/anhuiMap/anQingMap/huaiNing.json' // 怀宁县 import wangJiang from '../../../../static/commonJs/anhuiMap/anQingMap/wangJiang.json' // 望江县 import tongCheng from '../../../../static/commonJs/anhuiMap/anQingMap/tongCheng.json' // 桐城市 import qianShan from '../../../../static/commonJs/anhuiMap/anQingMap/qianShan.json' // 潜山市 import yingJiang from '../../../../static/commonJs/anhuiMap/anQingMap/yingJiang.json' // 迎江区 // 六安市区县地图 import yeJi from '../../../../static/commonJs/anhuiMap/luAnMap/yeJi.json' // 叶集区 import shuCheng from '../../../../static/commonJs/anhuiMap/luAnMap/shuCheng.json' // 舒城县 import yuAn from '../../../../static/commonJs/anhuiMap/luAnMap/yuAn.json' // 裕安区 import jinAn from '../../../../static/commonJs/anhuiMap/luAnMap/jinAn.json' // 金安区 import jinZhai from '../../../../static/commonJs/anhuiMap/luAnMap/jinZhai.json' // 金寨县 import huoShan from '../../../../static/commonJs/anhuiMap/luAnMap/huoShan.json' // 霍山县 import huoQiu from '../../../../static/commonJs/anhuiMap/luAnMap/huoQiu.json' // 霍邱县 // 蚌埠市区县地图 import wuHe from '../../../../static/commonJs/anhuiMap/bengBuMap/wuHe.json' // 五河县 import guZhen from '../../../../static/commonJs/anhuiMap/bengBuMap/guZhen.json' // 固镇县 import huaiYuan from '../../../../static/commonJs/anhuiMap/bengBuMap/huaiYuan.json' // 怀远县 import huaiShang from '../../../../static/commonJs/anhuiMap/bengBuMap/huaiShang.json' // 淮上区 import yuHui from '../../../../static/commonJs/anhuiMap/bengBuMap/yuHui.json' // 禹会区 import bengShan from '../../../../static/commonJs/anhuiMap/bengBuMap/bengShan.json' // 蚌山区 import longZiHu from '../../../../static/commonJs/anhuiMap/bengBuMap/longZiHu.json' // 龙子湖区 // 宣城市区县地图 import guangDe from '../../../../static/commonJs/anhuiMap/xuanChengMap/guangDe.json' // 广德市 import jiXi from '../../../../static/commonJs/anhuiMap/xuanChengMap/jiXi.json' // 绩溪县 import jingXian from '../../../../static/commonJs/anhuiMap/xuanChengMap/jingXian.json' // 泾县 import jingDe from '../../../../static/commonJs/anhuiMap/xuanChengMap/jingDe.json' // 旌德县 import langXi from '../../../../static/commonJs/anhuiMap/xuanChengMap/langXi.json' // 郎溪县 import ningGuo from '../../../../static/commonJs/anhuiMap/xuanChengMap/ningGuo.json' // 宁国市 import xuanZhou from '../../../../static/commonJs/anhuiMap/xuanChengMap/xuanZhou.json' // 宣州区 // 宿州市区县地图 import yongQiao from '../../../../static/commonJs/anhuiMap/suzhouMap/yongQiao.json' // 埇桥区 import siXian from '../../../../static/commonJs/anhuiMap/suzhouMap/siXian.json' // 泗县 import lingBi from '../../../../static/commonJs/anhuiMap/suzhouMap/lingBi.json' // 灵璧县 import dangShan from '../../../../static/commonJs/anhuiMap/suzhouMap/dangShan.json' // 砀山县 import xiaoXian from '../../../../static/commonJs/anhuiMap/suzhouMap/xiaoXian.json' // 萧县 // 淮南市区县地图 import baGongShang from '../../../../static/commonJs/anhuiMap/huaiNanMap/baGongShang.json' // 八公山区 import fengTai from '../../../../static/commonJs/anhuiMap/huaiNanMap/fengTai.json' // 凤台县 import daTong from '../../../../static/commonJs/anhuiMap/huaiNanMap/daTong.json' // 大通区 import shouXian from '../../../../static/commonJs/anhuiMap/huaiNanMap/shouXian.json' // 寿县 import panJi from '../../../../static/commonJs/anhuiMap/huaiNanMap/panJi.json' // 潘集区 import tianJiaAn from '../../../../static/commonJs/anhuiMap/huaiNanMap/tianJiaAn.json' // 田家庵区 import xieJaJi from '../../../../static/commonJs/anhuiMap/huaiNanMap/xieJaJi.json' // 谢家集区 var anHuiMapList = { "合肥市": heFei, "池州市": chiZhou, "安庆市": anQing, "淮南市": huaiNan, "六安市": luAn, "蚌埠市": bengBu, "宣城市": xuanCheng, "宿州市": suZhou, }; var mapJson = [ { name: '合肥市', eName: 'heFei', level: 2 , json: heFei, children:[], }, { name: '池州市', eName: 'chiZhou', level: 2 , json: chiZhou, children:[ { name: '东至县', eName: 'dongZhi', level: 3 , json: dongZhi }, { name: '贵池区', eName: 'guiChi', level: 3 , json: guiChi }, { name: '青阳县', eName: 'qingYang', level: 3 , json: qingYang }, { name: '石台县', eName: 'shiTai', level: 3 , json: shiTai } ] }, { name: '安庆市', eName: 'anQing', level: 2 , json: anQing, children:[ { name: '大观区', eName: 'daGuan', level: 3 , json: daGuan }, { name: '太湖县', eName: 'taiHu', level: 3 , json: taiHu, }, { name: '宜秀区', eName: 'yiXiu', level: 3 , json: yiXiu, }, { name: '宿松县', eName: 'suSong', level: 3 , json: suSong, }, { name: '岳西县', eName: 'yueXi', level: 3 , json: yueXi, }, { name: '怀宁县', eName: 'huaiNing', level: 3 , json: huaiNing, }, { name: '望江县', eName: 'wangJiang', level: 3 , json: wangJiang, }, { name: '桐城市', eName: 'tongCheng', level: 3 , json: tongCheng, }, { name: '潜山市', eName: 'qianShan', level: 3 , json: qianShan, }, { name: '迎江区', eName: 'yingJiang', level: 3 , json: yingJiang, }, ], }, { name: '淮南市', eName: 'huaiNan', level: 2 , json: huaiNan, children:[ { name: '八公山区', eName: 'baGongShang', level: 3 , json: baGongShang }, { name: '凤台县', eName: 'fengTai', level: 3 , json: fengTai, }, { name: '大通区', eName: 'daTong', level: 3 , json: daTong, }, { name: '寿县', eName: 'shouXian', level: 3 , json: shouXian, }, { name: '潘集区', eName: 'panJi', level: 3 , json: panJi, }, { name: '田家庵区', eName: 'tianJiaAn', level: 3 , json: tianJiaAn, },{ name: '谢家集区', eName: 'xieJaJi', level: 3 , json: xieJaJi, }, ], }, { name: '六安市', eName: 'luAn', level: 2 , json: luAn, children:[ { name: '叶集区', eName: 'yeJi', level: 3 , json: yeJi }, { name: '舒城县', eName: 'shuCheng', level: 3 , json: shuCheng, }, { name: '裕安区', eName: 'yuAn', level: 3 , json: yuAn, }, { name: '金安区', eName: 'jinAn', level: 3 , json: jinAn, }, { name: '金寨县', eName: 'jinZhai', level: 3 , json: jinZhai, }, { name: '霍山县', eName: 'huoShan', level: 3 , json: huoShan, },{ name: '霍邱县', eName: 'huoQiu', level: 3 , json: huoQiu, }, ], }, { name: '蚌埠市', eName: 'bengBu', level: 2 , json: bengBu, children:[ { name: '五河县', eName: 'wuHe', level: 3 , json: wuHe }, { name: '固镇县', eName: 'guZhen', level: 3 , json: guZhen, }, { name: '怀远县', eName: 'huaiYuan', level: 3 , json: huaiYuan, }, { name: '淮上区', eName: 'huaiShang', level: 3 , json: huaiShang, }, { name: '禹会区', eName: 'yuHui', level: 3 , json: yuHui, }, { name: '蚌山区', eName: 'bengShan', level: 3 , json: bengShan, }, { name: '龙子湖区', eName: 'longZiHu', level: 3 , json: longZiHu, }, ], }, { name: '宣城市', eName: 'xuanCheng', level: 2 , json: xuanCheng, children:[ { name: '广德市', eName: 'guangDe', level: 3 , json: guangDe }, { name: '绩溪县', eName: 'jiXi', level: 3 , json: jiXi, }, { name: '泾县', eName: 'jingXian', level: 3 , json: jingXian, }, { name: '旌德县', eName: 'jingDe', level: 3 , json: jingDe, }, { name: '郎溪县', eName: 'langXi', level: 3 , json: langXi, }, { name: '宁国市', eName: 'ningGuo', level: 3 , json: ningGuo, },{ name: '宣州区', eName: 'xuanZhou', level: 3 , json: xuanZhou, }, ] }, { name: '宿州市', eName: 'suZhou', level: 2 , json: suZhou, children:[ { name: '埇桥区', eName: 'yongQiao', level: 3 , json: yongQiao }, { name: '泗县', eName: 'siXian', level: 3 , json: siXian, }, { name: '灵璧县', eName: 'lingBi', level: 3 , json: lingBi, }, { name: '砀山县', eName: 'dangShan', level: 3 , json: dangShan, }, { name: '萧县', eName: 'xiaoXian', level: 3 , json: xiaoXian, } ], }, ]; export default{ anHuiMapList: anHuiMapList, mapJson: mapJson, } 参考文档获取省市区json http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=24.9792116201569&lng=104.86930847167969&zoom=10 echart图例 https://·/explore.html