mapbox 的交互性 markers/points 取决于所选的渲染方法

Interactivity of mapbox markers/points depending on the rendering method selected

据我所知,在 mapbox 地图 (Mapbox GL JS) 上绘制标记时,您有两个选择:

(a) 将它们绘制为点和图层样式(在这种情况下,它们被渲染到最终的 <canvas> 元素中,它们不可检查,它们不能接收:悬停状态

(b) 将它们添加为标记,然后保持单独可检查的 HTML 元素。不过,这种方法的缺点是它们 zoom/scale 不像地图那样流畅和快速,因此会出现一点惯性。

两种方法都支持交互(如果您在 (a) 选项中提供 interactive: true),尽管您以不同的方式处理它。

在构建交互式地图时,我应该考虑这些方法中的任何其他限制吗?

这是一个相当宽泛的问题。但总的来说,我认为每种方法的优点是:

  • 图层:地图的一部分,因此您可以获得碰撞检测、数据驱动样式、缩放驱动样式等。
  • 标记:DOM的一部分,所以你得到CSS,Javascript事件,图像和字体的简单集成,以及更简单的鼠标事件处理,比如:hover.

说图层不支持 :hover 并不完全正确。您可以检测 mouseOver 然后执行 map.setFeatureState() 以在要素上设置悬停 属性。只是你不是免费得到的。