如何使用React.js在OpenStreetMap上实现路径动画及标记滑动效果

我们直接使用React生态对接OSM最成熟的react-leaflet组件库，搭配leaflet-moving-marker插件即可快速实现两个需求，二者逻辑完全一致，仅标记的渲染内容不同。

1. 安装依赖 #

npm install leaflet react-leaflet leaflet-moving-marker
# 或使用yarn安装
yarn add leaflet react-leaflet leaflet-moving-marker

安装完成后在项目入口文件（如main.jsx/App.jsx）引入leaflet全局样式：

import 'leaflet/dist/leaflet.css'

2. 核心实现代码 #

import { MapContainer, TileLayer } from 'react-leaflet'
import L from 'leaflet'
import 'leaflet-moving-marker'

// 自定义车辆图片Icon（用于需求2：图片沿路径滑动）
const carIcon = L.icon({
  iconUrl: '替换为你的车辆图片本地路径/在线地址',
  iconSize: [32, 32], // 图片展示尺寸
  iconAnchor: [16, 16] // 锚点对齐到图片中心
})

const OSMRouteMap = () => {
  // 替换为你实际的路径经纬度数组，格式为[[纬度, 经度], [纬度, 经度], ...]
  const routePoints = [[39.9042, 116.4074], [39.9142, 116.4174], [39.9242, 116.4274]]
  // 动画总时长，单位毫秒，数值越大动画速度越慢
  const duration = 10000

  const initAnimation = (map) => {
    // 需求1：默认Marker沿路径滑动
    const markerAnimation = L.Marker.movingMarker(routePoints, duration, {
      autostart: true, // 地图加载完成自动播放动画
      loop: false // 动画是否循环播放
    }).addTo(map)

    // 需求2：自定义图片沿路径滑动，替换上面的Marker逻辑即可
    // const imgAnimation = L.Marker.movingMarker(routePoints, duration, {
    //   autostart: true,
    //   loop: false,
    //   icon: carIcon // 传入自定义图片配置
    // }).addTo(map)

    // 可选控制方法
    // markerAnimation.pause() 暂停动画
    // markerAnimation.start() 继续/重新启动动画
    // markerAnimation.stop() 停止动画回到起点
  }

  return (
    <MapContainer
      center={[39.9042, 116.4074]}
      zoom={13}
      style={{ width: '100%', height: '600px' }}
      whenReady={(e) => initAnimation(e.target)}
    >
      {/* 加载OpenStreetMap官方底图 */}
      <TileLayer
        attribution='&copy; OpenStreetMap contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
    </MapContainer>
  )
}

export default OSMRouteMap

3. 效果优化说明 #

• 如需匹配车辆朝向和路径方向：可以监听movingMarker的move事件，获取当前移动角度后调用setRotationAngle方法旋转标记即可
• 路径点过多动画卡顿：可以先对路径数组做抽稀处理，减少点位数量后动画流畅度会明显提升

参考效果 #

内容的提问来源于stack exchange，提问作者Aditi Tyagi