检测标记何时穿过航路点半径

Question

我正在使用 waypoints 为沿路线的标记制作动画，我正在尝试检测标记何时到达/穿过航路点。

我已经设法获得了动画部分，但检测似乎失败了

我正在创建路线

 p = data.map(function(o){ return o.steps.map(function(g) { return g.geometry.coordinates }) });
    const locations = p.reduce(function(arr, val){ 
                arr = arr.concat(val); return arr ;
            }, [] ), 
          route = new MultiLineString(locations);

我得到 waypoints

 intersections = data.reduce(function(s,c){ s=(!s?[]:s); return s = s.concat(c.steps.reduce(
            function(e,a){ 
                e = (!e? [] : e); 
                e.push(a.maneuver.location); 
                return e; },[])); return s;  
                                            },[]),

我在“单击右箭头”时从航路点创建范围

waypoint = fromLonLat(intersections[0])
                    .concat(fromLonLat(intersections[1]));

然后尝试检测标记动画何时通过航路点

function moveFeature(event) {
      const speed = 60;
      const time = event.frameState.time;
      const elapsedTime = time - lastTime;
      distance = (distance + (speed * elapsedTime) / 1e6) % 2;
      lastTime = time;
      const currentCoordinate = route.getLineString(distance).getCoordinateAt(distance);
      if(isNaN(currentCoordinate[0]) || (distance > 1) || Extent.containsCoordinate(waypoint, currentCoordinate) ) return stopAnimation();
    
      position.setCoordinates(currentCoordinate);
      const vectorContext = getVectorContext(event);
      vectorContext.setStyle(styles.geoMarker);
      vectorContext.drawGeometry(position);
      map.getView().setCenter(currentCoordinate);
      map.render();
    }

但这似乎不是真的。有没有另一种方法可以检测标记何时超过某个点/半径？

Answer 1

除非 movefeature 恰好停在 Extent.containsCoordinate 范围内，否则 return 不会为真，动画将继续经过该点。最好计算到航路点的距离（或总距离的分数）并在到达时停止

const nearest = route.getClosestPoint(waypoint);
const partCoordinates = [];
route.forEachSegment(function(start, end){
  partCoordinates.push(start.slice());
  if (new LineString([start, end]).intersectsCoordinate(nearest)) {
    partCoordinates.push(nearest);
    return true;
  }
});
const fraction = new LineString(partCoordinates).getLength() / route.getLength();

检测标记何时穿过航路点半径

Detect when marker crosses waypoint radius

javascript

geometry

openlayers-6