如何最好地綁定到 webapp 的 mapbox-gl 更新代碼中？

Question

背景

我正在編寫一個瀏覽器擴展，它在 komoot.com/plan 的map上繪制。 目前我通過在現有的canvas之上放置一個canvas來做到這一點。

這很好用，但它是 static，並且當用戶移動 map 或放大它或網站將特定位置聚焦在 map 上時，它還沒有反應。

題

我如何最好地融入這個 map 更新的事件循環？

考慮的方法

1. 我可以模仿/重新實現 komoot 如何處理用戶輸入，但這聽起來脆弱、不可靠且混亂。 我會通過為鼠標按鈕事件和 cursor 移動等添加監聽器來做到這一點。

2. 頁面的 URL 包含緯度和經度坐標以及縮放級別，例如https://www.komoot.com/plan/@49.9535480,5.3956956,11.345z 。 它在 map 更改后更改。 我假設有一種方法可以通知 URL 中的更改。如果是這樣，我可以動態更新我的canvas 。

   • 這仍然需要對頁面內部結構進行某種程度的模仿。 但是，比選項 1 少得多。
   • 這樣做我只能在 animation 完成后更新我的 canvas。 這不是一個交易破壞者，但理想情況下，我想將它與 map 本身一起逐幀更新，以獲得更令人愉悅的用戶體驗。

額外細節

• Komoot 似乎在使用mapbox-gl
• 這是一個Manifest 2 內容腳本擴展
• 這是我的第一個瀏覽器擴展
• 我正在使用這個優秀的模板在Scala.js中編寫這個
  • 不要讓這阻止您發布 javascript 解決方案或將我指向 javascript 文檔！

截屏

Answer 1

您似乎沒有提到明顯的方法：使用move事件：

map.on('move',e => {...
   // get center with map.getCenter()
});

但是你到底想做什么還不是很清楚，所以很難給出更具體的建議。