как узнать, какая строка будет нажата при нажатии на любую параллельную линию, сгенерированную из геометрии стиля в Openlayer - PullRequest
Новая
       42

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

0 голосов
/ 08 сентября 2018

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

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

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

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

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

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

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

Я гуглю, но не смог найти решение, по какой геометрии (линии) стилей нажимают на карте. Пожалуйста, для кода см. Выше jsFiddler ссылка ссылка

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

1 Ответ

0 голосов
/ 24 марта 2019

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