如何最好地绑定到 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()
});

但是你到底想做什么还不是很清楚，所以很难给出更具体的建议。