echarts地图 geo-3d

代码搬运工-

已于 2024-02-26 14:36:42 修改

阅读量1.5k

点赞数 16

文章标签： javascript 前端开发语言

于 2024-02-26 14:29:58 首次发布

本文链接：https://blog.csdn.net/weixin_45811204/article/details/136297844

版权

文章讲述了在使用ECharts3D地图时，点击事件不触发的问题，作者尝试了不同版本并发现与地图类型和写法有关。最终通过修改代码，使用mousedown事件并在`mounted`生命周期钩子中处理点击事件，解决了问题。

摘要由CSDN通过智能技术生成

项目场景：echarts geo-3d 地图在使用时点击地图点击事件无法触发

问题描述

当我想把选中区域的样式改变时，无法触发点击事件。
myChart.on(‘click’,function(params){
console.log(params)
});
我又在文档找到 getZr() 可以触发这个方法触发了但是没有我找到我想要的数据
myChart.getZr().on(‘dblclick’, function(params) {
console.log(params)
});

触发了但是没有获取到我应该拿到的数据并且target也是空的、name和value 都没有。

原因分析：

最开始想到是echarts版本问题不匹配，我试了很多版本，我用的版本 “echarts”: “^5.5.0”, “echarts-gl”: “^2.0.9”, 结果都还是一样不触发。
后来查到资料

解决方案：

最终我还是改变了我的写法代码如下:


<script>
	import mapimg from "@/assets/mapBg.png"
	import * as echarts from 'echarts'
	import 'echarts-gl'
	import datamap from "@/assets/demo.json"
	export default {
		name: 'about',
		data() {
			return {
				msg: 'map',
				bg: '',
				myChart: ''
			}
		},
		mounted() {
			this.myChart = echarts.getInstanceByDom(document.getElementById("mapEchart"));
			if (this.myChart == null) { // 如果不存在，就进行初始化
				this.myChart = echarts.init(document.getElementById("mapEchart"));
			}
			this.myChart.hideLoading();
			this.myChart.clear();
			this.myChart.resize();
			this.myChart.getZr().on('mousedown', params => {
				const pointInPixel = [params.offsetX, params.offsetY];
				const pointInGeo = this.myChart.convertFromPixel('geo', pointInPixel);

			});
			this.$nextTick(() => {
				this.chartMap(datamap, '#082F5F');
			});
		},
		methods: {
			chartMap(nval, mapColor) {
				// 这是地图的配置
				echarts.registerMap("yuanshi", nval);

				// 配置项
				let option = {
					series: [{
							type: 'map3D',
							map: 'yuanshi',
							// 设置为透明
							itemStyle: {
								color: [1, 1, 1, 0],
							},
							emphasis: {
								itemStyle: {
									color: [1, 1, 1, 0],
								},
							},
							light: {
								//光照阴影
								main: {
									// color: "#fff", //光照颜色
									intensity: 1, //光照强度
									shadowQuality: 'high', //阴影亮度
									shadow: true, //是否显示阴影
									shadowQuality: "medium", //阴影质量 ultra //阴影亮度
									alpha: 40,
									beta: 20
								},
								ambient: {
									intensity: 0.4
								}
							},
							// 设置地图类型，与geo3D中的map对应，
							// 旋转
							boxHeight: 60,
							boxWidth: 60,
							viewControl: {
								minAlpha: 70, // 上下旋转最下角度
							},
						},

					],
					geo3D: {
						zlevel: -1,
						show: true,
						map: 'yuanshi',
						autoRotate: true,
						// distance:500,
						roam: true,
						boxHeight: 60,
						boxWidth: 60,
						regionHeight: 7,
						shading: 'realistic',
						realisticMaterial: { // 地图材质纹理
							detailTexture: mapimg,
							textureTiling: 1,
							roughness: 1
						},


						itemStyle: {
							// color: '#ffa55c',
							opacity: 1,
							borderWidth: .4,
							borderColor: "#222222",
							areaColor: '#f0bb14',
							emphasis: {
								itemStyle: {

									color: '#fff' // 选中时的背景颜色
								}
							}
						},

						label: {
							show: true,
							position: "top",
							color: "#000", //初始化区域字体颜色
							fontSize: 14,
							lineHeight: 14
						},
						// 旋转
						viewControl: {
							minAlpha: 70, // 上下旋转最下角度
						},
						light: {
							//光照阴影
							main: {
								// color: "#fff", //光照颜色
								intensity: 1, //光照强度
								shadowQuality: 'high', //阴影亮度
								shadow: true, //是否显示阴影
								shadowQuality: "medium", //阴影质量 ultra //阴影亮度
								alpha: 40,
								beta: 20
							},
							ambient: {
								intensity: 0.4
							}
						},
					}
				};

				this.myChart.setOption(option);
				this.myChart.on("click", (params) => {
					// 点击获取data中的数据
					console.log(params);
					// 设置选中高亮
					let regions = [{
						itemStyle: {
							color: '#36A8FF',
							opacity: 1
						},
						label: {
							show: true
						},
					}, ];
					regions[0].name = params.name;
					option.geo3D.regions = regions;
					this.myChart.setOption(option);
				})
			},
		}
	}
</script>
<style>
	.map {
		display: flex;
		justify-content: center;
		width: 100%;
		height: 100vh;
	}

	.map-container {
		width: 100%;
		height: 100%;
		background: #fff;
		position: relative;
	}

	.map-container-title {
		margin: 3.5rem 0 1rem;
		font-size: 1.5rem;
		font-weight: 700;
		color: #333;
		line-height: 1.875rem;
		display: flex;
		justify-content: center;
	}

	.map-chart {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
		height: 100%;
		width: 100%;
	}



	.map-container {
		width: 100%;
		height: 100%;
		background: #fff;
		position: relative;
	}

	.map-container-title {
		margin: 3.5rem 0 1rem;
		font-size: 1.5rem;
		font-weight: 700;
		color: #333;
		line-height: 1.875rem;
		display: flex;
		justify-content: center;
	}

	.map-chart {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 5;
		height: 100%;
		width: 100%;
		/* background-color: red; */
	}
</style>