1

关于交互性的 Deck.gl文档非常清楚如何将点击侦听器添加到地图中的特定图层，但我不确定如何将点击侦听器添加到底图本身。

我追求的用例是单击 iconLayer 显示模式，然后单击底图（<DeckGL/>基本组件，与 iconLayer 等子组件不同）隐藏模式。

我可以通过将点击侦听器绑定到 webgl 画布来将某些东西组合在一起，然后在点击时检查我的 iconLayer 是否收到了点击，但必须有更好的方法。有谁知道如何区分底图上的点击和使用deck.gl 的图层上的点击？任何建议都会非常有帮助！

4

2 回答 2

2

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

我刚刚发现组件中的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
    }
  }}
/>
于 2020-08-09T12:48:27.310 回答
-1 
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

PS我很快就会回来查看这个线程所以随时问

于 2020-08-10T18:18:40.190 回答