echarts使用中国3D地图展示热力值值并添加地图缩放按钮

背景

之前项目中需要的功能是在3D地图中展示热力图，同时点击地图上某个城市时左上方相应的城市选项也要改变，且鼠标滑动到地图热力点上方时需要展示热力值。现在需要在地图上添加缩放按钮，但也遇到些困难，所以记录一下这个地图的功能实现过程。

效果

实现过程

这里只展示几个功能的实现代码

地图配置：

地图通过设置3个geo来达到3D地图的效果

geo = [
		{
			layoutCenter: ['50%', '50%'], // 位置
			layoutSize: '180%', // 大小
			show: true,
			map: 'china',
			roam: false,
			zoom: 0.55,
			aspectScale: 1,
			tooltip: {
				trigger: 'item',
				triggerOn: 'mousemove',
				alwaysShowContent: true,
				formatter(a) {
					if (a.data) {
						return `${a.name}：${a.value[2]}`
					}
					return ''
				}
			},
			label: {
				normal: {
					show: false,
					textStyle: {
						color: '#fff'
					}
				},
				emphasis: {
					show: true,
					textStyle: {
						color: '#fff'
					}
				}
			},
			itemStyle: {
				normal: {
					areaColor: {
						type: 'linear',
						x: 1200,
						y: 0,
						x2: 0,
						y2: 0,
						colorStops: [
							{
								offset: 0,
								color: 'rgba(3,27,78,0.75)' // 0% 处的颜色
							},
							{
								offset: 1,
								color: 'rgba(58,149,253,0.75)' // 50% 处的颜色
							}
						],
						global: true // 缺省为 false
					},
					borderColor: '#c0f3fb',
					borderWidth: 1,
					shadowColor: '#8cd3ef',
					shadowOffsetY: 10,
					shadowBlur: 120
				},
				emphasis: {
					areaColor: 'rgba(0,254,233,0.6)'
				}
			}
		},
		{
			type: 'map',
			map: 'china',
			zlevel: -1,
			aspectScale: 1,
			zoom: 0.55,
			layoutCenter: ['50%', '51%'],
			layoutSize: '180%',
			roam: false,
			silent: true,
			itemStyle: {
				normal: {
					borderWidth: 1,
					borderColor: 'rgba(58,149,253,0.8)',
					shadowColor: 'rgba(172, 122, 255,0.5)',
					shadowOffsetY: 5,
					shadowBlur: 15,
					areaColor: 'rgba(5,21,35,0.1)'
				}
			}
		},
		{
			type: 'map',
			map: 'china',
			zlevel: -2,
			aspectScale: 1,
			zoom: 0.55,
			layoutCenter: ['50%', '52%'],
			layoutSize: '180%',
			roam: false,
			silent: true,
			itemStyle: {
				normal: {
					borderWidth: 1,
					borderColor: 'rgba(58,149,253,0.6)',
					shadowColor: 'rgba(65, 214, 255,1)',
					shadowOffsetY: 5,
					shadowBlur: 15,
					areaColor: 'transpercent'
				}
			}
		}
	]

散点图配置

因为展示的是某个城市的热力值，所占面积太小，所以热力值以散点图的形式展示出来：

// 散点图配置
series = [
		{
			name: '营销政策热力图',
			type: 'scatter',
			coordinateSystem: 'geo',
			data: [],
			symbolSize: 12.6,
			itemStyle: {
				normal: {
					color: '#FF8C00',
					position: 'right',
					show: true
				}
			}
		},
		{
			type: 'effectScatter',
			coordinateSystem: 'geo',
			data: [],
			symbolSize: 12.6,
			showEffectOn: 'render',
			rippleEffect: {
				brushType: 'stroke'
			},
			hoverAnimation: true,
			label: {
				normal: {
					formatter: '{b}',
					color: '#fff',
					position: 'right',
					show: false
				}
			},
			itemStyle: {
				normal: {
					color: '#f4e925',
					shadowBlur: 50,
					shadowColor: '#EE0000'
				}
			},
			zlevel: 1
		}
	]

点击地图选择城市功能

通过监听click事件并通过params.componentSubType来判断是否点击的是某个城市的散点

MapRef.value.chart.on('click', (params) => {
			if (params.componentSubType === 'effectScatter') {
				_.filterParams.publicationArea = params.name
				getPolicyTotalData()
			}
		})

点击按钮缩放地图

通过找到option的所有geo并改变zoom来实现

function zoomIn() {
		const currentZoom = MapRef.value.chart.getOption().geo[0].zoom // 当前的缩放比例

		console.log('currentZoom', currentZoom, MapRef.value.chart.getOption())
		const increaseAmplitude = 0.1 // 点击按钮每次 放大/缩小 比例

		const zoom = currentZoom + increaseAmplitude > 1.5 ? 1.5 : currentZoom + increaseAmplitude

		const option = MapRef.value.chart.getOption()
		option.geo[0].zoom = zoom
		option.geo[1].zoom = zoom
		option.geo[2].zoom = zoom
		MapRef.value.chart.setOption(option, { replaceMerge: 'geo' })
	}