使用 Lerp 函数使用 MapBox 的 FreeCameraApi 进行平滑的 MapBox 相机运动答案

【问题标题】：Using Lerp Function To Make Smooth MapBox Camera Movements Using MapBox's FreeCameraApi使用 Lerp 函数使用 MapBox 的 FreeCameraApi 进行平滑的 MapBox 相机运动
【发布时间】：2022-10-12 21:33:52
【问题描述】：

我正在关注this tutorial 路线动画教程。

到目前为止，我所做的一切都像那里所说的那样。一切都与教程中的一样。但我的动画唯一的问题是相机运动的平滑度。

如果您转到链接并向下滚动一点，您会看到标题为“用 LERP 解决问题”，这就是我感到困惑的地方。在此标题下显示了两个视频，显示了 lerp 函数的不同之处。由于我很困惑，我无法添加 lerp 功能，所以我的相机会做出剧烈的动作。

我有用于绘制折线的坐标数组，但是当我使用相同的坐标时，相机会产生烦人的急剧运动。我可能应该通过 lerp 函数传递这个坐标，这样我就会为我的相机获得新的位置，它可以进行平滑的移动。

const targetRoute = [[6.56158, 46.05989],[6.56913, 46.05679], ...]

const routeDistance = turf.lineDistance(turf.lineString(targetRoute));

const alongRoute = turf.along(
turf.lineString(targetRoute),
routeDistance * phase
).geometry.coordinates;

// calculate the distance along the path based on the animationPhase
const[lng, lat] = turf.along(path, pathDistance * animationPhase).geometry
    .coordinates;

const bearing = -180 - animationPhase * 150.0;
const cameraAltitudr=2000

const computeCameraPosition = (
 pitch,
 bearing,
 targetPosition,
 altitude
) => {
 var bearingInRadian = bearing / 57.29;
 var pitchInRadian = (90 - pitch) / 57.29;
 
 var lngDiff =
   ((altitude / Math.tan(pitchInRadian)) *
     Math.sin(-bearingInRadian)) /
   70000; // ~70km/degree longitude
 var latDiff =
   ((altitude / Math.tan(pitchInRadian)) *
     Math.cos(-bearingInRadian)) /
   110000 // 110km/degree latitude
 
 var correctedLng = targetPosition.lng + lngDiff;
 var correctedLat = targetPosition.lat - latDiff;
 
 const newCameraPosition = {
   lng: correctedLng,
   lat: correctedLat
 };
 
 return newCameraPosition

    const camera = map.getFreeCameraOptions()
      // set the positionthe camera
      camera.position = mapboxgl.MercatorCoordinate.fromLngLat(
computeCameraPosition(76, bearing, alongRoute, cameraAltitude),
cameraAltitude
);
 
// tell the camera to look at a point along the route
camera.lookAtPoint({
lng: alongRoute[0],
lat: alongRoute[1]
});
 
map.setFreeCameraOptions(camera);

如何将 Lerp 函数添加到我的动画中？

【问题讨论】：

标签： javascript mapbox mapbox-gl-js turfjs lerp

【解决方案1】：

我是上述教程的作者。如果您查看源代码中的this file，您将看到相同的computeCameraPosition() 函数，但使用了用于平滑运动的lerp 函数。

// amazingly simple, via https://codepen.io/ma77os/pen/OJPVrP
function lerp(start, end, amt) {
  return (1 - amt) * start + amt * end
}

const computeCameraPosition = (
  pitch,
  bearing,
  targetPosition,
  altitude,
  smooth = false
) => {
  var bearingInRadian = bearing / 57.29;
  var pitchInRadian = (90 - pitch) / 57.29;

  var lngDiff =
    ((altitude / Math.tan(pitchInRadian)) *
      Math.sin(-bearingInRadian)) /
    70000; // ~70km/degree longitude
  var latDiff =
    ((altitude / Math.tan(pitchInRadian)) *
      Math.cos(-bearingInRadian)) /
    110000 // 110km/degree latitude

  var correctedLng = targetPosition.lng + lngDiff;
  var correctedLat = targetPosition.lat - latDiff;

  const newCameraPosition = {
    lng: correctedLng,
    lat: correctedLat
  };

  if (smooth) {
    if (previousCameraPosition) {
      const SMOOTH_FACTOR = 0.95
      newCameraPosition.lng = lerp(newCameraPosition.lng, previousCameraPosition.lng, SMOOTH_FACTOR);
      newCameraPosition.lat = lerp(newCameraPosition.lat, previousCameraPosition.lat, SMOOTH_FACTOR);
    }
  }

  previousCameraPosition = newCameraPosition

  return newCameraPosition
};

【讨论】：