Deck.gl：監聽點擊底圖

Question

關於交互性的 Deck.gl 文檔非常清楚如何將點擊偵聽器添加到地圖中的特定圖層，但我不確定如何將點擊偵聽器添加到底圖本身。

我所追求的用例是單擊 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，如上所示，這是來自文檔@ https://deck.gl/docs/developer-guide/interactivity 。

這是你將如何實現它https://i.stack.imgur.com/eNiKW.png

PS我很快就會回來查看這個線程所以隨時問