React+Echarts Geo3d地图点击事件获取地名

成果展示

☞只展示地图部分

踩坑描述

// 黑人问号??点击并没有触发啊！！
echartAnalysisMap.on('click', function (e) {
     
});

解决方法

step1:监听整块地图面板

// 第二个坑是：返回数据中没有地名信息！！
echartAnalysisMap.getZr().on('click', function (e) {
     
	console.log("点击：",e);
});

然鹅返回值并卵…继续

step2:在emphasis中label的formatter中获取地名信息

每次鼠标经过，给全局变量area 重新赋值！！！

// 鼠标经过的时候把地名存到全局变量！！
emphasis: {
      //当鼠标放上去  地区区域是否显示名称
	label: {
     
		formatter: function (params) {
     
			area=params.name;
			return params.name;
		},
		show: true,
		textStyle: {
     
			color: 'orange',
			fontSize: 18,
			backgroundColor: 'rgba(0,23,11,0)'
		}
	}
},

step3:onClick后再将area中的值set到state中

那么问题来了：如何判断点击事件发生在绘制地图中，还是在地图外？？

因_为.getZr()是监听的是整块地图画布。
难道我们要判断点击返回数据的xy是否在地图范围??nonono不用这么复杂。

继^续 填坑！！！

step4:通过判断当前鼠标当前样式解决！！

当鼠标地图范围中，鼠标样式是pointer，否则是default
防止点击其他位置也执行click函数，所以要判断。

// 画布div的id！！
echartAnalysisMap.getZr().on('click', function (e) {
     
	let isinside=$('#area_top_mid_2').children()[0].style.cursor;
	if(area!==''&&isinside=="pointer"){
     
		setmapArea(area);//setState(我用的是hooks)
	}
});

总结

我的思路：

存变量area

true

emphasis.label.formatter

.getZr监听

pointer?

setState保存maparea并显示

如果有更好的解决办法请联系我非常感谢！希望能帮助到大家~
这是我的第一篇博客，请多多指教。