首页 > 解决方案 > React Deck.gl IconLayer 右键单击

问题描述

我一直在试图弄清楚如何右键单击以在 IconLayer 地图标记上工作。我已经尝试过建议的方式

例如。

onClick: (info, event) => console.log(event.rightcllick)

但这似乎对我不起作用。每当我右键单击时,都不会触发任何事件或从地图画布触发我的动作侦听器(我已经测试过删除地图侦听器,我得到相同的结果,没有事件)

请问有人有什么建议吗?

快速更新这个...

经过进一步搜索,我在文档中找到了这个。

https://deck.gl/docs/developer-guide/interactivity#calling-the-picking-engine-directly

但是,当我触发 onclick 时,我无法在地图上找到任何标记,并且pickInfo返回为空。

我不得不稍微调整它的完成方式,因为这是一个基于类的组件,所以我无法使用钩子

    ...

    deckRef = React.createRef()

    deckClick = e => {
        const pickInfo = this.deckRef.current.pickObject({
            x: e.clientX,
            y: e.clientY,
            radius: 1,
            layerIds: ['icon-layer-TEST'],
        })

        console.log(pickInfo)
        console.log(e, e.clientX, e.clientY)
        console.log(this.deckRef.current)
    }


    render() {
        const { center, google, initialMapCenter, language, zoom } = this.props

        return (
            <Container
                className={MAP_CONTAINER_CLASS_NAME}
                id="map"
                onContextMenu={this.deckClick}
            >
                <DeckGL ref={this.deckRef}>
                    <GoogleMap

    ...

标签: reactjsdeck.glgoogle-maps-react

解决方案


推荐阅读