echarts 地图迁徙与地图下钻

echarts 地图迁徙与地图下钻

一、迁徙

1、引入中国地图数据及echarts

const china = require("./echarts-mapJson-master/china.json")
import * as echarts from 'echarts'

2、数据准备

// 点数据 需要hover或点击获取数据可以添加额外的参数，
// 如{ value: [118.8062, 31.9208], code:'440100',itemStyle: { color: '#4ab2e5' }，code可以在hover或点击的时候拿到；
// 数组最后一个点是线指向的终点，也可不设
let poinstData = [{ value: [118.8062, 31.9208], itemStyle: { color: '#4ab2e5' } }, { value: [127.9688, 45.368], itemStyle: { color: '#4fb6d2' } }, { value: [110.3467, 41.4899], itemStyle: { color: '#52b9c7' } }, { value: [125.8154, 44.2584], itemStyle: { color: '#5abead' } }, { value: [116.4551, 40.2539], itemStyle: { color: '#f34e2b' } }, { value: [123.1238, 42.1216], keysValue: 8, itemStyle: { color: '#f56321' } }, { value: [114.4995, 38.1006], itemStyle: { color: '#f56f1c' } }, { value: [117.4219, 39.4189], itemStyle: { color: '#f58414' } }, { value: [112.3352, 37.9413], itemStyle: { color: '#f58f0e' } }, { value: [109.1162, 34.2004], itemStyle: { color: '#f5a305' } }, { value: [103.5901, 36.3043], itemStyle: { color: '#e7ab0b' } }, { value: [106.3586, 38.1775], itemStyle: { color: '#dfae10' } }, { value: [101.4038, 36.8207], itemStyle: { color: '#d5b314' } }, { value: [103.9526, 30.7617], itemStyle: { color: '#c1bb1f' } }, { value: [108.384366, 30.439702], itemStyle: { color: '#b9be23' } }, { value: [113.0823, 28.2568], itemStyle: { color: '#a6c62c' } }, { value: [102.9199, 25.46639], itemStyle: { color: '#96cc34' } }, { value: [113.335367, 23.13559]}],
// 线数据 同样可以添加额外的参数，点击时type为lines时可拿到参数
let linesData = [{ coords: [ [118.8062, 31.9208],[113.335367, 23.13559]], lineStyle: { color: '#4ab2e5' } }, { coords: [ [127.9688, 45.368],[113.335367, 23.13559]], lineStyle: { color: '#4fb6d2' } }, { coords: [ [110.3467, 41.4899],[113.335367, 23.13559]], lineStyle: { color: '#52b9c7' } }, { coords: [ [125.8154, 44.2584],[113.335367, 23.13559]], lineStyle: { color: '#5abead' } }, { coords: [ [116.4551, 40.2539],[113.335367, 23.13559]], lineStyle: { color: '#f34e2b' } }, { coords: [ [123.1238, 42.1216],[113.335367, 23.13559]], lineStyle: { color: '#f56321' } }, { coords: [ [114.4995, 38.1006],[113.335367, 23.13559]], lineStyle: { color: '#f56f1c' } }, { coords: [ [117.4219, 39.4189],[113.335367, 23.13559]], lineStyle: { color: '#f58414' } }, { coords: [ [112.3352, 37.9413],[113.335367, 23.13559]], lineStyle: { color: '#f58f0e' } }, { coords: [ [109.1162, 34.2004],[113.335367, 23.13559]], lineStyle: { color: '#f5a305' } }, { coords: [ [103.5901, 36.3043],[113.335367, 23.13559]], lineStyle: { color: '#e7ab0b' } }, { coords: [ [106.3586, 38.1775],[113.335367, 23.13559]], lineStyle: { color: '#dfae10' } }, { coords: [ [101.4038, 36.8207],[113.335367, 23.13559]], lineStyle: { color: '#d5b314' } }, { coords: [ [103.9526, 30.7617],[113.335367, 23.13559]], lineStyle: { color: '#c1bb1f' } }, { coords: [ [108.384366, 30.439702],[113.335367, 23.13559]], lineStyle: { color: '#b9be23' } }, { coords: [ [113.0823, 28.2568],[113.335367, 23.13559]], lineStyle: { color: '#a6c62c' } }, { coords: [ [102.9199, 25.46639],[113.335367, 23.13559]], lineStyle: { color: '#96cc34' } }
]

3、获取options

getOptions(name, id, seriesData, pointsData, linesData ){let _this = this;return {backgroundColor: '#0F1C3C',toolbox: { // 返回按钮right: '5%',top: '15%',feature: {myBack: {show: false,title: '返回',icon: 'path://M473.2 276.9v-133c-4-18.4-11.7-27-20.2-30.3-17.2-6.7-37.8 8.5-37.8 8.5L95.9 395.4c-70.1 48.4-4.8 84.7-4.8 84.7L405.5 751c62.9 46 67.7-24.2 67.7-24.2V603.4c319.3-99.2 449.9 297.5 449.9 297.5 12.1 21.8 19.3 0 19.3 0 123.4-595-469.2-624-469.2-624z m0 0',iconStyle: {color: "#1aaef6",borderColor: "#1aaef6"},onclick: async function () {const seriesData = await _this.handleMap('china', chinaJson);const opt = await _this.getOptions('china', '', seriesData, _this.pointsData, _this.linesData)await _this.myChart.setOption(opt, true);}}}},tooltip: {trigger: 'item',backgroundColor: '#ffff',borderColor: '#FFFFCC',showDelay: 0,hideDelay: 0,enterable: true,transitionDuration: 0,extraCssText: 'z-index:100',formatter: function (params, ticket, callback) {let name = params.name//根据业务自己拓展要显示的内容// 自定义数据 params.datalet res = "<div>" + name + '</div>'return res;},},geo: {map: 'china',// 下钻时以当前地图名称命名show: true,roam: true,zoom: 1.2,label: {show: true,color: '#1DE9B6',emphasis: {show: true,areaColor: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#073684' // 0% 处的颜色},{offset: 1,color: '#061E3D' // 100% 处的颜色}]}}},layoutSize: '100%',itemStyle: {areaColor: {x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: '#073684' // 0% 处的颜色},{offset: 1,color: '#061E3D' // 100% 处的颜色}]},borderColor: '#2863ad',borderWidth: 1,shadowColor: 'rgba(10,76,139,1)',shadowOffsetY: 0,shadowBlur: 60,emphasis: {areaColor: '#2AB8FF',borderWidth: 0,color: 'green',label: {show: false}}},},series: [{type: 'map',map: 'china',// 有data时不需要roam: true,geoIndex: 0,aspectScale: 0.85, //长宽比show: true,textStyle: {color: '#1DE9B6'},emphasis: {textStyle: {color: 'rgb(183,185,14)'}},itemStyle: {borderColor: 'rgb(147, 235, 248)',borderWidth: 1,areaColor: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: '#09132c' // 0% 处的颜色}, {offset: 1,color: '#274d68'  // 100% 处的颜色}],globalCoord: true // 缺省为 false},emphasis: {areaColor: 'rgb(46,229,206)',// shadowColor: 'rgb(12,25,50)',borderWidth: 0.1}},// data:[{name:'',value:[经,纬]}] },{type: 'effectScatter', // 动效散点coordinateSystem: 'geo',showEffectOn: 'render',zlevel: 1,rippleEffect: { // 涟漪特效period: 4, // 动画的周期，秒数scale: 5, // 动画中波纹的最大缩放比例brushType: 'stroke',// ['fill','stroke'] 波纹海浪或线圈},hoverAnimation: true,label: {formatter: '{b}',position: 'right',offset: [15, 0],color: '#1DE9B6',show: true},itemStyle: {color: '#1DE9B6',shadowBlur: 10,shadowColor: '#333'},symbolSize: function (val) { // 点大小return 12},data: pointsData}, //地图线的动画效果{type: 'lines',zlevel: 2,effect: {show: true,period: 4, // 箭头指向速度，值越小速度越快trailLength: 0.4, // 特效尾迹长度[0,1]值越大，尾迹越长重symbol: 'arrow', // 箭头图标symbolSize: 7, // 图标大小},lineStyle: {color: '#1DE9B6',width: 1, // 线条宽度opacity: 0.1, // 尾迹线条透明度curveness: .3 // 尾迹线条曲直度},data: linesData}]};
}

4、画图

// 先引入中国地图，再画图
async loadData(){let _this = this;this.myChart = echarts.getInstanceByDom(this.$refs.baseEcharts);if (!this.myChart) {this.myChart = await echarts.init(this.$refs.baseEcharts);}await _this.myChart.setOption(option);
}

二、下钻

1、画中国地图
2、从地图点击事件中获取到省级id或市级编码（具体看下一级显示什么）
3、根据省级id拿到对应省级地图数据，注册地图
4、拿到对应option，再setOptions，返回中国地图再画一遍中国地图（当前显示哪一个地图就画哪一个地图）
5、缩放或其他原因，切换地图后地图不在容器中心点解决，setOptions(option,true)，true意思为重新绘画地图

			/*** 获取当前配置项* @param{string} name 当前地图* @param{string} id 当前地图id* @param{array} seriesData 组[{name,value}]* @param{array} pointsData 点* @param{array} linesData 线* */async getOptions(name, id, seriesData, pointsData, linesData) {let _this = this;// 参考迁徙图return{}}/*** @description 画图* @param{string} name 画图* @param{object} json 当前地图数据* @return{array} [{name:'',value:[]}]* */async handleMap(name, json) {let obj = {}, map = [];// 1、初始化全国地图// 2、设置点击事件-单击下钻，双击返回// 3、单击注册点击省份地图-setOption画图// 4、双击返回，重新画全国地图if (name !== 'china') { // 注册地图echarts.registerMap(name, json);}let mapFeatures = echarts.getMap(name) ? echarts.getMap(name).geoJson.features : [];mapFeatures.forEach(function (v) {obj = { name: v.properties.name, value: v.properties.cp }if (name === 'china') {obj.value.push(v.properties.id)}map.push(obj)});return map},/*** @description 实例化* */async loadData() {let _this = this;this.myChart = echarts.getInstanceByDom(this.$refs.baseEcharts);if (!this.myChart) {this.myChart = await echarts.init(this.$refs.baseEcharts);}// 全国地图echarts.registerMap('china', chinaJson);// 每个地图点，series第一个type: 'map'的dataconst seriesData = await this.handleMap('china', chinaJson);// optionsconst opt = await this.getOptions('china', '', seriesData, this.pointsData, this.linesData)// 绘画await this.myChart.setOption(opt);// 监控窗口变化// window.addEventListener("resize", this.resize); // myChart.resize();this.myChart.on('click', async function (params) {// 项目点击-下钻if (params.data && params.data.value && params.data.value[2]) {const json = require('./echarts-mapJson-master/geometryProvince/' + params.data.value[2] + '.json')if (!json) {return;}const seriesData = await _this.handleMap(params.data.value[2], json);const opt = await _this.getOptions(params.data.value[2], params.data.value[2], seriesData, _this.pointsData, _this.linesData)opt.toolbox.feature.myBack.show = trueawait _this.myChart.setOption(opt, true);}})// 双击返回this.myChart.on('dblclick', async function (params) {if (params.type === 'dblclick' && params.data && (!params.data.value || !params.data.value[2])) {const seriesData = await _this.handleMap('china', chinaJson);const opt = await _this.getOptions('china', '', seriesData, _this.pointsData, _this.linesData)await _this.myChart.setOption(opt, true);}})},

参考：
1、echarts Demo集 https://www.isqqw.com/
2、https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=31.027163647290617&lng=106.75386074913891&zoom=4.5
3、地图资源 https://gitee.com/niceguy802/map-resources.git