Openlayers 如何获取要单击的线字符串单击Openlayer中从样式几何图形生成的任何平行线

在修改了上找到的参考链接后，我使用openlayer v5.2中单个要素对象的样式几何体选项在地图上生成了具有不同宽度笔划的平行线字符串

在样式函数中使用带有调用函数的几何体时，我不会获得样式的单击事件上的几何体。为此，我去掉了调用函数，并给出了固定的平行距离分辨率

所以现在在“singleclick”事件中，我能够获得所有样式及其几何体的特征。 但是在这里，

map.on（'singleclick'，function（event）{}）.

如何区分单击了哪一行或哪一几何体

我尝试单击事件点是否与直线相交，但没有成功 我理解这里的问题是我点击笔划不在直线上，因为点击事件像素点也不能与直线相交或不相交相比

具有多几何图形样式的单个特征的图像：

甚至我也尝试过turf.js pointToLineDistance（），但由于动态宽度和线坐标的差异，在我的逻辑中没有得到正确的linestring

我在谷歌上搜索了一下，但没有找到任何解决方案，可以在地图上点击哪种样式的几何体（线）。 有关代码，请参见上面的jsFiddler参考链接

---

获取单击哪个线字符串的任何帮助都是通过任何事件进行的。

单击不太可能与任何线字符串完全相交，但您可以对每个几何体使用

getClosestPoint（）

方法来查找最近的线字符串：

map.on('singleclick',function(event){
  var coordinate = event.coordinate;
  console.log('singleclick');
  var feature = map.forEachFeatureAtPixel(event.pixel, function(feature){return feature});
  if (feature) {
    var closestGeom;
    var closestDistSq = Infinity;
    var resolution = map.getView().getResolution();
    var styles = styleFunction(feature, resolution);
    styles.forEach(function(style){
      var geomFn = style.getGeometryFunction();
      if (geomFn) {
        var geom = geomFn(feature);
      } else {
        var geom = feature.getGeometry();
      }
      var closestPoint = geom.getClosestPoint(coordinate);
      var distSq = Math.pow(closestPoint[0]-coordinate[0],2)+Math.pow(closestPoint[1]-coordinate[1],2);
      if (closestDistSq > distSq) {
        closestDistSq = distSq;
        closestGeom = geom;
      }
    });
    console.log(closestGeom.getCoordinates());
  }
});