reactjs 移动弯曲瓣叶上的标记[关闭]

3vpjnl9f  于 2023-11-18  发布在  React
关注(0)|答案(1)|浏览(108)

**已关闭。**此问题需要debugging details。目前不接受回答。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答问题。
13小时前关闭
Improve this question
我已经创建了一个弯曲的曲线,并使用相同的纬度和中点移动标记,但标记在中点处移出曲线
该标记应遵循的箭头从开始到结束。我使用叶片曲线和自定义标记的运动动画

xzv2uavs

xzv2uavs1#

为了制作一条曲线,请在脚本下方添加
然后像下面这样计算曲线

var latlngs = [];
  var latlng1 = waypoints[0];
  var latlng2 = waypoints[1];
  
  var offsetX = latlng2[1] - latlng1[1];
  var offsetY = latlng2[0] - latlng1[0];
  
  var r = Math.sqrt(Math.pow(offsetX, 2) + Math.pow(offsetY, 2));
  var theta = Math.atan2(offsetY, offsetX);
  
  var thetaOffset = (Math.PI / 10);
  
  var r2 = (r / 2) / (Math.cos(thetaOffset));
  var theta2 = theta + thetaOffset;
  
  var midpointX = (r2 * Math.cos(theta2)) + latlng1[1];
  var midpointY = (r2 * Math.sin(theta2)) + latlng1[0];
  
  var midpointLatLng = [midpointY, midpointX];

  latlngs.push(latlng1, midpointLatLng, latlng2);

   var pathOptions = {
      color: '#e6e6e6',
      opacity: 0.5,
      weight: 5,
      dashArray: '10, 10',
      dashOffset: '0',
   };
  
   var polyline = L.curve(
     ['M', latlng1, 'Q', midpointLatLng, latlng2],
     pathOptions
  ).addTo(map);

字符串
最后把标记移到上面

var startTime;
function animateMarker(timestamp) {
   if (!startTime) {
     startTime = timestamp;
   }

   var progress = timestamp - startTime;
   var ratio = progress / duration;

   if (ratio < 1) {
    var point = getQuadraticBezierPoint(latlng1, midpointLatLng, latlng2, ratio);
    marker.setLatLng(point);
    map.panTo(point); // Pan the map to follow the marker
    requestAnimationFrame(animateMarker);
  } else {
    // Animation complete, remove the polyline
    map.removeLayer(polyline);
    map.removeLayer(endMarker);
  }
}

 // Function to calculate a point on a quadratic bezier curve
 function getQuadraticBezierPoint(p0, p1, p2, t) {
   var x = (1 - t) * (1 - t) * p0[0] + 2 * (1 - t) * t * p1[0] + t * t * p2[0];
   var y = (1 - t) * (1 - t) * p0[1] + 2 * (1 - t) * t * p1[1] + t * t * p2[1];
   return [x, y];
 }


//开始动画

requestAnimationFrame(animateMarker);

相关问题