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

傻小孩儿～～

已于 2023-12-19 17:09:58 修改

阅读量1.7k

点赞数 14

CC 4.0 BY-SA版权

分类专栏： echarts 文章标签： echarts

于 2023-12-19 17:08:28 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42913167/article/details/135087186

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何利用echarts.js和echarts-auto-tooltip.js库实现2.5D地图的动态效果，包括地图堆叠、tooltip自动轮播和大小自适应。作者提供了详细代码示例和技术细节，适用于各种区域的地图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、效果图

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/89fd1b519f9c49709f3fedf7241564ff.png

二、整体架构流程

使用多个地图图层堆叠而成，使用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可自己在网上下载，任何区域的地图均适用。