如何在MapboxGL JS中悬停具有XY坐标的区域？

Question

我在地图中使用悬停工具提示。当一个区域悬停时，我会在左上角显示一个带有小XY位移的工具提示，以便鼠标光标不会覆盖工具提示的指针。

当我将鼠标光标移动到其边界附近的另一个区域时，如图中所示，区域会突出显示在光标下方，而不是应该在方形指针下面。

有哪些方法可以解决此问题？在理想的方式中，我希望悬停效果不应用于鼠标光标坐标，而是应用于鼠标移动时已知和更改的其他点的坐标。

Answer 1

我曾遇到过类似的问题，我尝试用不同的方法解决。我想计算多边形的质心，并且一旦用户将鼠标悬停在多边形上，总是将标记（在你的情况下是方形指针）放在计算位置上。

我遇到的主要问题是我的多边形是凹的，并且有多个洞（如果你正在处理国家边界，你会遇到同样的问题）所以我找到了一个很好的算法（库），我曾经这样称为{ {3}}

Polylabel

您可以阅读有关此主题的更多信息以及MapBox中的人员如何使用它来解决此上的标签定位问题。

虽然这不是你问题的答案，但我发现这个解决方案快速且可用，但前提是缩放级别和多边形表面之间的关系才有意义。

如果我想做一些像你建议的那样我会先得到一个默认的点偏移量，如果该偏移量超出多边形，我会在多边形坐标中找到最近的点并将其附加到该点。

要执行这些计算，您可以使用link库。如果第二个几何体完全包含在第一个几何体中，则它具有turf.js返回布尔值，而其他几何体可以帮助您找到多边形边界上的最近点。我希望这有帮助！