如何在 Openlayer 中单击从样式几何生成的任何平行线时单击哪个 lineString [英] how to get which lineString is get clicked on click on any parallel line generated from Style geometry in Openlayer

问题描述

在修改了 http://jsfiddle.net/CPRam/egn1kmc8/.

在样式函数中使用带有调用函数的几何图形时，我没有在样式的单击事件中获取几何图形.因此，为此，我删除了调用函数并为平行距离提供了固定分辨率.

While using geometry with call function in style function I'm not getting the geometry on single click event for the Style. So for that, I removed call function and given fixed resolution with distance for parallel.

所以现在在 'singleclick' 事件中，我能够获得具有所有样式及其几何形状的特征.但是这里在 map.on('singleclick',function(event){})... 中.如何区分点击了哪条线或几何体.

So now on 'singleclick' event, I'm able to get the feature with all style and its geometry. But here inside map.on('singleclick',function(event){})....How to differentiate on which line or geometry get clicked.

我试过点击事件点是否与线相交，但没有成功我在这里理解的问题是我点击了 Stroke not on Line 因为点击事件像素点也无法与是否与线相交进行比较

I tried click event point intersect with line or not but not got sucess then I understood here the problem is I am clicking on Stroke not on Line because of that on click event pixel point also cannot compare with intersecting to the line or not

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

Image of single feature with multi geometry style:

即使我尝试过 turf.js pointToLineDistance() 但由于动态宽度和线坐标差异在我的逻辑中没有得到正确的线串.

Even I tried turf.js pointToLineDistance() but due to the dynamic width and line coordinate difference not getting right linestring in mine logic.

我用谷歌搜索但没有得到任何解决方案来获得在地图上点击哪种样式的几何(线).请参阅上面的代码 jsFiddler 参考链接

I google but didn't get any solution to get which style geometry(line) is get clicked on the map. Please for the code see above jsFiddler reference link

获得点击哪个 lineString 的任何帮助都是通过任何事件.

Any help to get which lineString is get clicked is through any event.

推荐答案

单击不太可能与任何线串完全相交，但您可以在每个几何图形上使用 getClosestPoint() 方法来查找哪个最接近:

A click is unlikely to exactly intersect any of the linestrings but you can use the getClosestPoint() method on each geometry to find which was closest:

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());
  }
});

这篇关于如何在 Openlayer 中单击从样式几何生成的任何平行线时单击哪个 lineString的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！