如何最好地绑定到 webapp 的 mapbox-gl 更新代码？

问题描述

背景

我正在编写一个浏览器扩展程序来绘制 komoot.com/plan 的地图。 目前我通过在现有的 canvas 之上放置一个 canvas 来做到这一点。

这很有效，但它是静态的，并且在用户移动地图或放大地图或网站聚焦地图上的特定位置时还没有反应。

问题

我如何最好地与地图更新的这个事件循环联系起来？

考虑的方法

1. 我可以模仿/重新实现 komoot 处理用户输入的方式，但这听起来很脆弱、不可靠和混乱。我会通过为鼠标按钮事件和光标移动等添加侦听器来做到这一点。

2. 页面的 URL 包含经纬度坐标以及缩放级别，例如 https://www.komoot.com/plan/@49.9535480,5.3956956,11.345z。 在地图改变之后改变。我假设有一种方法可以通知 URL 中的更改。如果是这样，我就可以动态更新我的 canvas。

   • 这仍然需要对页面的内部结构进行一定程度的模仿。但是，远低于选项 1。
   • 这样做我只能在动画完成后更新我的画布。不是破坏交易，但理想情况下，我希望将它与地图本身一起逐帧更新，以获得更令人愉悦的用户体验。

其他详细信息

• Komoot 似乎在使用 mapbox-gl
• 这是一个 Manifest 2 Content Script 扩展
• 这是我的第一个浏览器扩展
• 我正在使用 Scala.js 在 this excellent template 中编写此内容
  • 不要让这妨碍您发布 javascript 解决方案或将我指向 javascript 文档！

截图

解决方法

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

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

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