vue ehacrts3D地图下钻

绘制中国地图并实现地图下钻返回上级地图以及平移缩放旋转功能

安装依赖

npm install echarts
npm install echarts-gl

效果：

离线地图geoJson数据包免费下载网站地址https://hxkj.vip/demo/echartsMap/

html:

<template>
	<div class="map-container">
		<el-button
			class="map-back"
			icon="el-icon-back"
			size="mini"
			@click="goBackMap()"
			>返回上级</el-button
		>
		<div ref="mapEChart" style="width: 730px; height: 415px"></div>
		<div class="map-illustrate">
			<span>鼠标左键平移地图</span>
			<span>鼠标滚轮缩放地图</span>
			<span>鼠标中键（按住鼠标滚轮）旋转地图</span>
		</div>
	</div>
</template>

js:

<script>
import * as echarts from "echarts";
import "echarts-gl";
import axios from "axios";

export default {
	data() {
		return {
			mapChart: null, // 地图实例
			mapList: [], // 当前展示的省市区所有数据
			currentMapName: "中国", // 当前地图的名称
			initAdCode: "100000", // 默认中国地图的编码
			historyInfo: [], // 记录历史点击的省市区，用于返回查询
		};
	},
	mounted() {
		if (!this.mapChart) {
			this.mapChart = echarts.init(this.$refs.mapEChart);
		}
		this.getMapData(this.initAdCode);
	},
	beforeDestroy() {
		this.destroyChart();
	},

	methods: {
		// 渲染地图
		renderChart(mapName, mapData) {
			if (!this.mapChart) {
				this.mapChart = echarts.init(this.$refs.mapEChart);
			}
			// 注册registerMap('地图名称', 地图数据）, 地图名称须和option里面的map一致
			echarts.registerMap(mapName, mapData);
			// 图表配置项
			let option= {
				series: [
					{
						type: "map3D",
						// 地图名称
						map: mapName,
						// 地图板块的颜色
						itemStyle: {
							color: "#021c33", // 地图板块的颜色
							opacity: 0.5, // 图形的不透明度 [ default: 1 ]
							borderWidth: 0.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域
							borderColor: "#0c58d1", // 图形描边的颜色。[ default: #333 ]
						},
						// 标签的相关设置
						label: {
							show: true, // (地图上的城市名称)是否显示标签
							distance: 5, // 距离图形元素的距离
							formatter: function (params) {
								return params.name ? params.name : " ";
							},
							textStyle: {
								// 标签的字体样式
								color: "#fff", // 地图初始化区域字体颜色
								fontSize: 8, // 字体大小
							},
						},
						// 鼠标 hover 高亮时图形和标签的样式
						emphasis: {
							// label 高亮时的配置
							label: {
								show: true, // (地图上的城市名称)是否显示标签
								textStyle: {
									color: "#fff", // 高亮时标签颜色变为 白色
									fontSize: 15, // 高亮时标签字体 变大
								},
							},
							// itemStyle 高亮时的配置
							itemStyle: {
								color: "#66ffff", // 高亮时地图板块颜色改变
							},
						},
						// 鼠标控制
						viewControl: {
							// 鼠标平移操作
							panMouseButton: "left",
							// 鼠标滚轮操作
							rotateMouseButton: "middle",
						},
					},
				],
			};
			// 渲染图表
			this.mapChart.setOption(option, true);
			// 监听地图点击事件
			// 防止多次触发点击事件
			this.mapChart.off("click");
			// 下钻
			this.mapChart.on("click", (param) => {
				const activeItem = this.mapList.find((item) => item.name == param.name);
				// 判断有子级的时候才可以下钻
				if (activeItem && activeItem.adcode && activeItem.childrenNum) {
					// 由于在https://hxkj.vip/demo/echartsMap/网站获取的数据没有parent父级的adcode，所以需要手动处理一下
					// this.historyInfo.push(activeItem);
					this.historyInfo.push({
						parent: {
							adcode: activeItem.acroutes[activeItem.acroutes.length - 1],
						},
						...activeItem,
					});
					this.currentMapName = param.name;
					this.getMapData(activeItem.adcode);
				}
			});
		},
		// 获取地图数据
		getMapData(code) {
			// 显示 loading 动画
			this.mapChart.showLoading();
			axios
				.get(`http://jlmpack.com/geoJson/100000/${code}.geoJson`)
				.then((res) => {
					if (res.status === 200) {
						// 获取当前选中的省市区的所有名称和编码
						res.data.features.forEach((item) => {
							this.mapList.push(item.properties);
						});
						// 隐藏 loading 动画
						this.mapChart.hideLoading();
						this.destroyChart();
						this.renderChart(this.currentMapName, res.data);
					}
				});
		},
		// 返回上一级地图
		goBackMap() {
			const lastItem = this.historyInfo.pop();
			if (lastItem && lastItem.parent && lastItem.parent.adcode) {
				this.getMapData(lastItem.parent.adcode);
			}
		},
		destroyChart() {
			// 防止内存泄露
			if (!this.mapChart) {
				return;
			}
			// 销毁实例
			this.mapChart.dispose();
			this.mapChart = null;
		},
	},
};
</script>

css:

<style scoped lang="scss">
.map-container {
	width: 730px;
	height: 415px;
	position: relative;

	.map-back {
		position: absolute;
		z-index: 1;
		margin: 10px;
	}
	.map-illustrate {
		position: absolute;
		right: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		font-size: 12px;
		padding: 10px;
	}
}
</style>