如何获取从Openlayer中的Style几何体生成的任何平行线上单击的行号

Question

在http://jsfiddle.net/CPRam/egn1kmc8/上找到参考链接后，我通过使用openlayer v5.2中具有不同宽度笔触的openlayer v5.2中的Single Feature Object的Style geometry选项在地图上生成了平行lineString。

在样式函数中将几何与调用函数一起使用时，我没有在单击事件中获得样式的几何。因此，我删除了调用函数，并给定了平行距离的固定分辨率。

因此，现在在“ singleclick”事件中，我能够获得具有所有样式及其几何形状的特征。 但是在map.on('singleclick',function(event){})...内。如何区分单击哪条线或几何。

我尝试了单击事件点是否与直线相交，但未成功 我在这里了解到问题是我单击了“不在线描边”，因为单击事件像素点也无法与相交或不相交

具有多种几何样式的单一特征的图像：

即使我尝试使用turf.js pointToLineDistance（），但由于动态宽度和线坐标差异在我的逻辑中未获得正确的线串。

我用google搜索，但没有任何解决方案来获取在地图上单击哪种样式的几何图形（线）。 请参见上面的代码 jsFiddler 参考链接

通过任何事件获取有关单击哪个lineString的任何帮助。

Answer 1

单击不太可能与任何线串完全相交，但是您可以在每个几何图形上使用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());
  }
});