echarts 3d Map，chart.on( 'click', function... ) ，点击Map无React

vom3gejh 于 2022-10-23 发布在 Echarts

关注(0)|答案(7)|浏览(731)

One-line summary [问题简述]

3DMap生成后，绑定鼠标单击事件，点击Map无效。如果Map上有3d bar，点击bar是有响应的。

Version & Environment [版本及环境]

ECharts version [ECharts 版本]:

claygl, version 1.1.0
echarts, version 4.0.4

Brower version [浏览器类型和版本]:

firefox 58

OS Version [操作系统类型和版本]:

windows10

Expected behaviour [期望结果]

正常响应点击事件

ECharts option [ECharts配置项]

option = {
viewControl:{
		distance:200
	},
    geo3D: {
    	map:"中国",
    	boxWidth: 100,
    	boxHeight: 10,
    	regionHeight: 3,
    	groundPlane: { // 沙盘
	      show: false
	    },
        itemStyle: {
            areaColor: '#1d5e98',
            opacity: 1,
            borderWidth: 1,
            borderColor: '#000'
        },
        label: {
            show: false,
            distance:5,
            textStyle: {
                color: '#000', //Map初始化区域字体颜色
                fontSize: 8,
                opacity: 1,
                backgroundColor: 'rgba(0,23,11,0)'
            }
        },
        emphasis: {
        	label: {
        		show: false
        	}
        },
        light: { //光照阴影
            main: {
                color: '#fff', //光照颜色
                intensity: 1.2, //光照强度
                shadow: true, //是否显示阴影
                alpha:55,
                beta:10

            },
             ambient: {
                intensity: 0.3
            }
        }
    },
    series:[
    	{
            name: 'bar3D',
            type: "bar3D",
            coordinateSystem: 'geo3D',
            barSize: 2, //柱子粗细
            shading: 'lambert',
            opacity: 1,
            bevelSize:0.5,
            label: {
                show: true,
                formatter: '{b}'
            },
            data: [{"name":"大庆","value":[125.03,46.58,300]}]
    	},
    	{
            name: 'scatter3D',
	        type: "scatter3D",
	        coordinateSystem: 'geo3D',
	        symbol: 'pin',
	        symbolSize: 30,
	        opacity: 1,
	        label: {
	            show: false,
	            formatter: '{b}'
	        },
	        itemStyle: {
	            borderWidth: 0.5,
	            borderColor: '#fff'
	        },
            data: [{"name":"大庆","value":[125.03,46.58,300]}]
    	}
    ]
}

myChart.on('click',function(e){
  funcOnClick(e);
});

### Other comments [其他信息]

<!-- For example: Screenshot or Online demo -->
<!-- [例如，截图或线上示例 (JSFiddle/JSBin/Codepen)] -->
![default](https://user-images.githubusercontent.com/15990351/36954959-5ec5ca7e-2060-11e8-96fe-d1662722b329.png)
![default](https://user-images.githubusercontent.com/15990351/36954980-806928f6-2060-11e8-8f99-e8eac3263e37.png)

echarts

来源：https://github.com/apache/echarts/issues/7860

7条答案

按热度按时间

nmpmafwu1#

修改为：
myChart.getZr().on('click',function(e){
funcOnClick(e);
});
Map上的点击事件分为数据区域和非数据区域的触发，加了getZr()后，不管是在非数据区域还是数据区域都能触发。

赞(0）回复(0）举报 2022-10-23

lsmd5eda2#

我的版本4.1.0，中国Map，单击事件无效，鼠标双击或者悬浮都能触发
update:
查看源代码

else if (name === 'click') {
            if (this._downEl !== this._upEl
                // Original click event is triggered on the whole canvas element,
                // including the case that `mousedown` - `mousemove` - `mouseup`,
                // which should be filtered, otherwise it will bring trouble to
                // pan and zoom.
                || !this._downPoint
                // Arbitrary value
                || dist(this._downPoint, [event.zrX, event.zrY]) > 4
            ) {
                return;
            }
            this._downPoint = null;
        }

第二个或判断为true，点击被拦截，删掉后两个或判断后单击事件正常

赞(0）回复(0）举报 2022-10-23

eiee3dmh3#

@surui0419 能点击，但是获取不到区域的信息呀？而且点击scatter3D等，也会触发

赞(0）回复(0）举报 2022-10-23

k10s72fa4#

目前为止，echarts v4.2.0-rc.2， echarts-gl v1.1.1 geo3D中单击事件还是无效

赞(0）回复(0）举报 2022-10-23

6ss1mwsb5#

只有series里配置的数据可以响应点击事件....
能否让map3d和其它3d GL组件同时联用？

赞(0）回复(0）举报 2022-10-23

h9vpoimq6#