Question

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

我所用的用例是，单击iconLayer会显示一个模态，然后单击底图（一个<DeckGL/>基本组件，不同于iconLayer之类的子代）会隐藏该模态。

我可以通过将单击侦听器绑定到webgl画布，然后将单击侦听器绑定到webgl画布上来进行绑定，然后单击我的iconLayer是否收到了单击，但是必须有更好的方法。有谁知道如何使用deck.gl区分底图上的点击和图层上的点击？任何建议都将非常有帮助！

Answer 1

整天都在此花钱。

我刚刚发现onClick组件中的DeckGL属性可以捕获空白区域或分层区域中的每次点击。来自空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，如上所示，这来自于文档{https://deck.gl/docs/developer-guide/interactivity。

这是您将如何实施 https://i.stack.imgur.com/eNiKW.png

P.S我将很快在此线程上进行检查，请随时提出要求

Deck.gl：监听点击底图

2 个答案: