Deck.gl:收听点击底图

Question

Deck.gl docs on interactivity非常清楚如何将单击侦听器添加到地图中的特定图层，但我不确定如何将单击侦听器添加到底图本身。

我想要的用例是，单击一个iconLayer会显示一个模式，然后单击底图(一个基于<DeckGL/>的组件，与iconLayer等子组件不同)会隐藏该模式。

我可以通过将点击监听器绑定到webgl画布上，然后在点击时检查我的iconLayer是否收到点击，来偷工减料，但肯定有更好的方法。有人知道如何使用deck.gl来区分底图和图层上的点击吗？任何建议都会很有帮助！

Answer 1

花了一整天的时间在这上面。

我刚刚发现DeckGL组件中的onClick属性可以捕获空白区域或分层区域中的每一次点击。来自空DeckGL画布的事件对象如下所示：

{
  "x": 877,
  "y": 556,
  "coordinate": [
    106.85059802642887,
    -6.138317762993974
  ],
  "lngLat": [
    106.85059802642887,
    -6.138317762993974
  ],
  "layer": null, //If the click come from layer, the layer should not null
  "color": null,
  "object": null,
  "index": -1
}

如果点击来自DeckGL之上的层，那么层将包含与对象相关的道具。

因此，在您的情况下，您可以检查图层是否为空

<DeckGL 
  //...Other props
  
  onClick={(event) => {
  
    //Click comes from empty area 
    if(event.layer === null) {
       // Set popup
       
    }else{
       // Clear Popup
    }
  }}
/>

Answer 2

const layer = new ScatterplotLayer({
    ...
    pickable: true,
    onHover: (info, event) => console.log('Hovered:', info, event),
    [onClick: (info, event) => console.log('Clicked:', info, event)][1]
});

您好，您可以在声明您的层时调用onclick，如上所示，这来自于documentations @ https://deck.gl/docs/developer-guide/interactivity。

下面是如何在https://i.stack.imgur.com/eNiKW.png中实现它

附言:我很快就会回来查看这个帖子，所以请随时询问。