如何通过Leaflet PIXIOVERLAY实现Marker沿坐标点序列移动

核心逻辑 #

Leaflet PixiOverlay内置了经纬度转PIXI容器像素坐标的工具方法，你只需要提前配置好路径坐标序列，通过逐帧动画计算当前帧对应的经纬度，同步更新PIXI Sprite的位置和绑定弹窗的坐标即可实现平滑移动效果。

实现步骤 #

• 初始化PIXI Sprite及绑定的弹窗，调整好Sprite锚点避免坐标偏移
• 配置路径坐标序列、动画时长等基础参数
• 通过requestAnimationFrame实现动画帧循环，每帧对路径坐标做线性插值计算当前经纬度
• 调用PixiOverlay提供的latLngToLayerPoint方法将经纬度转成像素坐标，更新Sprite的x/y属性
• 同步更新弹窗的经纬度，保证弹窗跟随Marker移动

完整代码示例 #

// 假设你已经完成Leaflet地图初始化，变量名为map，且已经加载好Marker纹理资源
var pixiOverlay = L.pixiOverlay(function(utils) {
  const container = utils.getContainer();
  const renderer = utils.getRenderer();
  // 核心转换方法：经纬度转当前地图状态下的PIXI容器像素坐标
  const latLngToPixiPos = utils.latLngToLayerPoint;

  // 初始化Marker，复用你的原有逻辑
  const markerTexture = resources.marker.texture;
  const marker = new PIXI.Sprite(markerTexture);
  // 调整锚点：x轴居中，y轴底部对准坐标点，根据你的Marker图片尺寸可自行调整
  marker.anchor.set(0.5, 1);
  container.addChild(marker);

  // 配置移动路径：替换为你自己的坐标点序列即可
  const movePath = [
    [29, 50],
    [30, 51],
    [31, 50.8],
    [32, 52]
  ];
  // 动画配置：全程移动耗时5秒，可自行调整
  const totalDuration = 5000;
  const animationStartTime = performance.now();
  let currentLatLng = movePath[0];

  // 初始化绑定弹窗，复用你的原有逻辑
  marker.popup = L.popup({className: 'pixi-popup'})
    .setLatLng(currentLatLng)
    .setContent('<b>移动中</b><br>我是跟随Marker移动的弹窗')
    .openOn(map);

  // 动画帧更新逻辑
  function runAnimation(timestamp) {
    // 计算当前动画进度0-1
    const elapsedTime = timestamp - animationStartTime;
    const progress = Math.min(elapsedTime / totalDuration, 1);

    // 线性插值计算当前进度对应的经纬度
    const segmentCount = movePath.length - 1;
    const currentSegment = Math.floor(progress * segmentCount);
    const segmentProgress = (progress * segmentCount) % 1;
    const segmentStart = movePath[currentSegment];
    const segmentEnd = movePath[Math.min(currentSegment + 1, movePath.length - 1)];
    currentLatLng = [
      segmentStart[0] + (segmentEnd[0] - segmentStart[0]) * segmentProgress,
      segmentStart[1] + (segmentEnd[1] - segmentStart[1]) * segmentProgress
    ];

    // 更新Marker位置
    const pixiPos = latLngToPixiPos(currentLatLng);
    marker.x = pixiPos.x;
    marker.y = pixiPos.y;

    // 同步更新弹窗位置
    marker.popup.setLatLng(currentLatLng);

    // 渲染本次更新
    renderer.render(container);

    // 动画未结束则继续下一帧
    if (progress < 1) {
      requestAnimationFrame(runAnimation);
    }
  }

  // 启动动画
  requestAnimationFrame(runAnimation);
}, new PIXI.Container());

// 将PixiOverlay挂载到地图上
pixiOverlay.addTo(map);

常见优化点 #

• 如果需要更平滑的移动效果，可以把线性插值换成缓动函数，比如ease-in、ease-out等
• 需要控制动画暂停/重播时，只需要存储requestAnimationFrame返回的ID，调用cancelAnimationFrame暂停，重置animationStartTime即可重播
• 多个Marker同时移动时，可把动画逻辑抽成公共方法，避免重复写帧循环
• Marker如果有旋转需求，可通过相邻两个坐标点的差值计算朝向，赋值给marker.rotation即可

内容的提问来源于stack exchange，提问作者ahmed assiri