[英]How to best tie into a webapp's mapbox-gl update code?
I'm writing a browser extension which paints over the map of komoot.com/plan .我正在编写一个浏览器扩展,它在 komoot.com/plan 的map上绘制。 Currently I do this by placing a
canvas
on top of the existing canvas
.目前我通过在现有的
canvas
之上放置一个canvas
来做到这一点。
This works well but it is static and does not yet react to when the user moves the map around or zooms into it or the website focusses a particular location on the map.这很好用,但它是 static,并且当用户移动 map 或放大它或网站将特定位置聚焦在 map 上时,它还没有反应。
How do I best tie into this event loop of map updates?我如何最好地融入这个 map 更新的事件循环?
I could mimic / reimplement how komoot processes user input, but this sounds fragile and unreliable and messy.我可以模仿/重新实现 komoot 如何处理用户输入,但这听起来脆弱、不可靠且混乱。 I would do this by adding listeners for mouse button events and cursor movement, etc.
我会通过为鼠标按钮事件和 cursor 移动等添加监听器来做到这一点。
The page's URL contains the lat and long coordinates together with the zoom level, eg, https://www.komoot.com/plan/@49.9535480,5.3956956,11.345z
.页面的 URL 包含纬度和经度坐标以及缩放级别,例如
https://www.komoot.com/plan/@49.9535480,5.3956956,11.345z
。 It changes after the map has changed.它在 map 更改后更改。 I assume there's a way to be notified of changes in the URL. If so I could then dynamically update my
canvas
.我假设有一种方法可以通知 URL 中的更改。如果是这样,我可以动态更新我的
canvas
。
You don't seem to have mentioned the obvious way: use the move
event:您似乎没有提到明显的方法:使用
move
事件:
map.on('move',e => {...
// get center with map.getCenter()
});
But it's not really clear exactly what you're trying to do, so hard to advise more specifically.但是你到底想做什么还不是很清楚,所以很难给出更具体的建议。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.