TypeScript项目中Leaflet.RotatedMarker类型错误的解决方法

这个问题我之前在项目里也碰到过——本质是Leaflet官方的TypeScript类型定义里没有包含RotatedMarker扩展的配置项，所以TypeScript会把rotationAngle这类属性当成非法参数报错。下面是具体的解决步骤：

1. 确保正确引入Leaflet.RotatedMarker库 #

首先要确认你已经通过npm安装了这个扩展包（或者通过CDN引入）：

• npm安装的话：npm install leaflet-rotated-marker --save
• 然后在你的组件代码里记得导入扩展：

  import 'leaflet-rotated-marker';
  

2. 创建自定义类型声明文件 #

在你的项目src目录下新建一个类型声明文件，比如命名为leaflet-rotated-marker.d.ts，内容如下：

import 'leaflet';

declare module 'leaflet' {
  // 扩展Leaflet的MarkerOptions接口，添加RotatedMarker的配置项
  interface MarkerOptions {
    rotationAngle?: number; // 旋转角度（可选）
    rotationOrigin?: string; // 旋转原点，比如'center'、'bottom left'等（可选）
  }
}

这个文件的作用是告诉TypeScript：Leaflet的MarkerOptions接口新增了这两个可选属性，这样它就不会再报错啦。

3. 确保TypeScript识别声明文件 #

检查你的tsconfig.json配置，确保include数组包含了这个声明文件。如果你的include已经覆盖了src下的所有文件（比如"src/**/*"），那这个.d.ts会自动被识别；如果没有的话，手动添加进去：

{
  "compilerOptions": {
    // 你的其他配置...
  },
  "include": [
    "src/**/*",
    "src/leaflet-rotated-marker.d.ts"
  ]
}

4. 正常使用旋转标记 #

现在你就可以在创建Marker时放心使用rotationAngle等配置项了：

const myMarker = L.marker([51.505, -0.09], {
  rotationAngle: 90, // 设置90度旋转
  rotationOrigin: 'center'
}).addTo(map);

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