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()
以在要素上设置悬停 属性。只是你不是免费得到的。
据我所知,在 mapbox 地图 (Mapbox GL JS) 上绘制标记时,您有两个选择:
(a) 将它们绘制为点和图层样式(在这种情况下,它们被渲染到最终的 <canvas>
元素中,它们不可检查,它们不能接收:悬停状态
(b) 将它们添加为标记,然后保持单独可检查的 HTML 元素。不过,这种方法的缺点是它们 zoom/scale 不像地图那样流畅和快速,因此会出现一点惯性。
两种方法都支持交互(如果您在 (a) 选项中提供 interactive: true
),尽管您以不同的方式处理它。
在构建交互式地图时,我应该考虑这些方法中的任何其他限制吗?
这是一个相当宽泛的问题。但总的来说,我认为每种方法的优点是:
- 图层:地图的一部分,因此您可以获得碰撞检测、数据驱动样式、缩放驱动样式等。
- 标记:DOM的一部分,所以你得到CSS,Javascript事件,图像和字体的简单集成,以及更简单的鼠标事件处理,比如
:hover
.
说图层不支持 :hover
并不完全正确。您可以检测 mouseOver
然后执行 map.setFeatureState()
以在要素上设置悬停 属性。只是你不是免费得到的。