【问题标题】:Check if pointer intersects with cluster subfeature in OpenLayers?检查指针是否与 OpenLayers 中的集群子特征相交?
【发布时间】:2020-07-27 14:05:27
【问题描述】:

我有一张船舶靠近时聚集在一起的地图,除非您随后将指针悬停在集群圆圈上。聚类基于此 OpenLayers 示例:

https://openlayers.org/en/latest/examples/earthquake-clusters.html

聚类工作正常。问题是当您将鼠标悬停在其标记上时,地图还应该显示有关船只的弹出信息。这适用于独立的非集群船舶。但是,当船只聚集在一起时,我不知道如何检测悬停的船只标记(如果有的话)。

当船舶标记未聚集时,我使用 OpenLayers 函数“getFeaturesAtPixel”,检查特征中是否有船舶标记,如果找到,则显示有关船舶的弹出信息。当它们被聚集时,在调用 getFeaturesAtPixel 时,将鼠标悬停在临时“扩展”集群内的标记上不会产生任何其他特征,但会产生集群本身。

解决这个问题的一种可能方法是在将鼠标悬停在集群上时手动检查船的特征。我试图使用范围的“containsCoordinate”来查看船舶标记几何的范围是否包含指针像素的坐标。但是,我从船舶标记获得的范围基本上是一个点值(来自用于定位标记的点),而不是整个图标覆盖的实际范围。

解决此问题的可能挑战:如何手动检查特征是否覆盖像素/坐标?

【问题讨论】:

  • 也许在底图下方排序的非聚类图层中使用相同的船舶源,然后您可以找到聚类和单个要素?
  • 这里是带有隐藏非聚类层的地震示例codesandbox.io/s/damp-flower-p1gh2
  • 谢谢,这很好。如果答案在评论中,我不确定最佳实践,但我已经发布了一个描述您的解决方案的答案,并附有信用。

标签: javascript typescript openlayers intersection


【解决方案1】:

感谢 Mike 在 cmets 中提供解决方案。

我为飞船添加了一个单独的 VectorLayer,带有隐藏标记,然后使用指针交互来触发弹出窗口。请注意,如果您(如 OL 示例中)的群集半径大于圆形图标上的实际半径,则该信息仍将显示群集图标外的隐藏标记。

Mike 提供了一个基于 OpenLayers 的地震集群示例的示例: codeandbox.io/s/damp-flower-p1gh2

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-06-17
    • 2020-12-22
    • 2018-06-03
    • 2020-03-06
    • 2023-01-27
    • 2012-08-10
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多