React-Leaflet v4（React TypeScript）中Marker旋转问题求助

问题描述 #

在React-Leaflet 4.1.0中尝试旋转Marker时遇到障碍：

• 参考旧版React-Leaflet使用leaflet-rotatedmarker插件的示例无效
• 直接用CSS设置transform: rotate(18deg);无法覆盖Leaflet内置样式
• 调用setRotationAngle()时触发TypeScript类型错误

当前依赖版本：

"dependencies": {
  "@types/leaflet": "^1.9.0",
  "@types/node": "^16.7.13",
  "@types/react": "^18.0.0",
  "@types/react-dom": "^18.0.0",
  "leaflet": "^1.9.2",
  "leaflet-rotatedmarker": "^0.2.0",
  "react-leaflet": "^4.1.0",
  "react-scripts": "5.0.1",
  "typescript": "^4.4.2"
}

解决步骤 #

1. 移除多余依赖 #

Leaflet 1.7及以上版本已经原生支持Marker旋转，不需要leaflet-rotatedmarker插件，直接卸载：

npm uninstall leaflet-rotatedmarker

2. 修复TypeScript类型问题 #

@types/leaflet默认没有包含旋转API的类型定义，需要手动扩展：
在项目src目录下创建leaflet.d.ts文件，添加以下内容：

import 'leaflet';

declare module 'leaflet' {
  interface MarkerOptions {
    rotationAngle?: number;
    rotationOrigin?: string;
  }

  interface Marker {
    setRotationAngle(angle: number): this;
    setRotationOrigin(origin: string): this;
  }
}

3. 使用原生旋转API实现Marker旋转 #

直接调用Leaflet原生API即可实现旋转，示例代码：

import { MapContainer, TileLayer, useMap } from 'react-leaflet';
import L from 'leaflet';
import { useEffect } from 'react';

// 自定义旋转Marker组件
function RotatedMarker() {
  const map = useMap();

  useEffect(() => {
    if (!map) return;

    // 创建带初始旋转角度的Marker
    const marker = L.marker([51.505, -0.09], {
      rotationAngle: 180, // 初始旋转角度（单位：度）
      rotationOrigin: 'center center' // 旋转原点，默认值为"center center"
    }).addTo(map);

    // 动态修改旋转角度示例
    // setTimeout(() => {
    //   marker.setRotationAngle(90);
    // }, 2000);

    // 组件卸载时移除Marker
    return () => map.removeLayer(marker);
  }, [map]);

  return null;
}

// 地图组件
export default function MyMap() {
  return (
    <MapContainer
      center={[51.505, -0.09]}
      zoom={13}
      style={{ height: '100vh', width: '100%' }}
    >
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <RotatedMarker />
    </MapContainer>
  );
}

4. 为什么CSS设置transform无效？ #

Leaflet的Marker元素由库动态生成，其transform样式会被Leaflet的内置逻辑实时覆盖，无法通过自定义CSS强制修改，必须使用官方提供的API来控制旋转。

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