как узнать, какая строка будет нажата при щелчке по любой параллельной линии, созданной из геометрии стиля в Openlayer

Я создал параллельную строку lineString на карте, используя параметры геометрии стиля для одного объекта в openlayer v5.2 с обводкой разной ширины после изменения найденной ссылки на http://jsfiddle.net/CPRam/egn1kmc8/.

При использовании геометрии с функцией вызова в функции стиля я не получаю геометрию при событии одного щелчка для стиля. Поэтому для этого я удалил функцию вызова и дал фиксированное разрешение с расстоянием для параллели.

Итак, теперь при событии «singleclick» я могу получить функцию со всем стилем и ее геометрией. Но здесь внутри map.on('singleclick',function(event){}).... Как отличить, на какой линии или геометрии щелкают.

Я пробовал, чтобы точка события щелчка пересекалась с линией или нет, но не добилась успеха, тогда я понял, что проблема в том, что я нажимаю на Stroke not on Line из-за того, что точка пикселя события щелчка также не может сравниваться с пересечением с линией или нет

Изображение отдельного объекта со стилем мульти-геометрии:

image-of-single-Feature-with-multi-geometry-Style

Даже я пробовал turf.js pointToLineDistance (), но из-за разницы в динамической ширине и координатах линии не получал правильную строку в моей логике.

Я гуглил, но не получил никакого решения, чтобы узнать, какая геометрия стиля (линия) будет нажата на карте. Код см. По ссылке выше jsFiddler.

Любая помощь в том, чтобы узнать, по какой строке lineString щелкнули, осуществляется через любое событие.


openlayers turfjs openlayers-5
person r08    schedule 08.09.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Щелчок вряд ли точно пересечет какую-либо из линий, но вы можете использовать метод 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());
  }
});
person Mike    schedule 24.03.2019