使用 echarts.js 和echarts-auto-tooltip.js 实现2.5D 地图

使用 echarts.js 和echarts-auto-tooltip.js 实现2.5D 地图，弹出框自动轮播，地图大小自适应！

一、效果图

二、整体架构流程

使用多个地图图层堆叠而成，使用echarts-auto-tooltip控件，实现tooltip自动轮博

三、主要代码实现

1、地图堆叠部分的代码

geo: [{
	show: true,
	type: 'map',
	map: 'beijing',
	label: {
		normal: {
			color:'#fff',
			fontSize:fontSize(0.12),
			show: true,
			opacity:0.8,
			textShadowColor:'rbga(0,0,0,0.18)',
			textShadowBlur:18,
			textShadowOffsetY:4,
		}
	},
	zlevel: 1,
	zoom: 1.14,
	aspectScale: 0.84,
	layoutCenter: ['50%', '46%'],
	layoutSize: '80%',
	roam: false,
	silent: true,
	itemStyle: {
		normal: {
			borderWidth: 1,
			borderColor:'#0b77c1',
			areaColor: {
				type: 'linear-gradient',
				x: 0,
				y: 300,
				x2: 0,
				y2: 0,
				colorStops: [
					{
						offset: 0.1,
						color: '#0b4e8b', // 0% 处的颜色
					},
					{
						offset: 0.8,
						color: '#1a36a4', // 100% 处的颜色
					},
				],
				global: true, // 缺省为 false
			},
		}
	},
},{
	show: true,
	type: 'map',
	map: 'beijing',
	zlevel: 0,
	zoom:1.14,
	aspectScale: 0.84,
	layoutCenter: ['50%', '46%'],
	layoutSize: '80%',
	roam: false,
	silent: true,
	itemStyle: {
		normal: {
			borderColor: '#08defb',
			borderJoin:'round',
			borderWidth:4,
			borderRadius:10,
			areaColor: 'red',
			shadowColor: 'red',
		},
	},
},{
	show: true,
	type: 'map',
	map: 'beijing',
	zlevel: -4,
	zoom: 1.18,
	aspectScale: 0.84,
	layoutCenter: ['50%', '49%'],
	layoutSize: '80%',
	roam: false,
	silent: true,
	itemStyle: {
		normal: {
			borderColor: 'red',
			borderJoin:'round',
			borderWidth:0,
			areaColor: '#0a2640',
		},
	},
},{
	show: true,
	type: 'map',
	map: 'beijing',
	zlevel: -2,
	zoom: 1.16,
	aspectScale: 0.82,
	layoutCenter: ['50%', '47%'],
	layoutSize: '80%',
	roam: false,
	silent: true,
	itemStyle: {
		normal: {
			borderColor: '#1f5a89',
			borderJoin:'round',
			borderWidth:1,
			areaColor: '#0a2640',
		},
	},
},{
	show: true,
	type: 'map',
	map: 'beijing',
	zlevel: -3,
	zoom: 1.16,
	aspectScale: 0.82,
	layoutCenter: ['50%', '48.5%'],
	layoutSize: '80%',
	roam: false,
	silent: true,
	itemStyle: {
		normal: {
			borderColor: '#123d60',
			borderJoin:'round',
			borderWidth:1,
			areaColor: '#0a2640',
		},
	},
},{
	show: true,
	type: 'map',
	map: 'beijing',
	zlevel: -5,
	zoom: 1.14,
	aspectScale: 0.84,
	layoutCenter: ['50%', '48%'],
	layoutSize: '80%',
	roam: false,
	silent: true,
	itemStyle: {
		normal: {
			borderJoin:'round',
			shadowBlur: 18,
			shadowColor: 'rgba(0,0,0,0.5)',
			shadowOffsetY:12,
		},
	},
}]

2、轮播部分代码

tools.loopShowTooltip(myCharts, option, { loopSeries: true, interval:4000});

interval： 间隔时间

四、技术细节

1、fontSize部分，封装的 1920尺寸的自适应代码，可以换成固定的尺寸。
2、地图的json数据和echarts-auto-tooltip.js可自己在网上下载，任何区域的地图均适用。