如何在Leaflet.js运行时设置带不同角度的自定义SVG标记图标？

你完全不用为每个角度单独生成SVG文件，这里有几个实用的方案，帮你轻松解决这个问题：

方案1：用CSS Transform直接旋转图标DOM元素 #

你已经给图标加了leaflet-custom-marker类，正好可以利用这个类来动态修改旋转角度，步骤非常简单：

1. 先定义好你的基础图标（和你原来的代码基本一致）：

const myIcon = L.icon({
  iconUrl: require('../../public/images/black-plane.svg'),
  iconRetinaUrl: require('../../public/images/black-plane.svg'),
  iconSize: [32, 32],
  className: 'leaflet-custom-marker'
});

2. 创建标记后，直接操作对应的DOM元素添加旋转样式：

// 创建标记并添加到地图
const marker = L.marker([yourLat, yourLng], { icon: myIcon }).addTo(map);

// 获取图标对应的DOM节点
const iconElement = marker.getElement().querySelector('.leaflet-custom-marker');

// 设置旋转角度，比如45度
iconElement.style.transform = `rotate(${45}deg)`;
// 可选：设置旋转原点为图标中心，避免旋转后位置偏移
iconElement.style.transformOrigin = 'center center';

如果之后需要动态更新角度，直接修改transform属性就行。这个方案的好处是零额外依赖，纯前端就能搞定，唯一要注意的是确保transformOrigin和你的图标锚点匹配，避免旋转后位置不对。

方案2：动态生成带旋转的SVG Data URI #

Leaflet的iconUrl其实支持Data URI，所以你可以在运行时修改SVG内容，生成带旋转效果的Data URI作为图标路径，不用单独存文件：

1. 先把你的原始SVG内容存为字符串（或者用fetch读取本地SVG文件内容）：

// 把你的black-plane.svg内容复制成字符串，注意保留viewBox等属性
const basePlaneSvg = `
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
  <!-- 这里是你飞机SVG的具体路径/图形内容 -->
</svg>
`;

2. 写一个函数，根据传入的角度生成带旋转的SVG Data URI：

function getRotatedPlaneUrl(angle) {
  // 在SVG根元素添加旋转变换，16 16是32x32图标的中心坐标
  const rotatedSvg = basePlaneSvg.replace(
    '<svg',
    `<svg transform="rotate(${angle} 16 16)"`
  );
  // 把SVG字符串转换成base64格式的Data URI
  return `data:image/svg+xml;base64,${btoa(rotatedSvg)}`;
}

3. 创建标记时动态传入生成的URL：

// 比如创建一个旋转90度的飞机标记
const marker = L.marker([yourLat, yourLng], {
  icon: L.icon({
    iconUrl: getRotatedPlaneUrl(90),
    iconSize: [32, 32],
    className: 'leaflet-custom-marker'
  })
}).addTo(map);

这个方案的旋转是SVG内部的，不会有CSS变换可能带来的层级或定位问题，适合对图标精度要求高的场景。

方案3：使用Leaflet专用旋转插件（最优雅） #

如果希望用更简洁的API实现，推荐使用leaflet-rotatedmarker插件，它专门为Leaflet标记旋转设计，支持动态更新角度：

1. 先安装插件（React项目可以用npm）：

npm install leaflet-rotatedmarker

2. 在代码中引入插件，然后直接使用旋转参数：

import 'leaflet-rotatedmarker';

// 定义基础图标
const myIcon = L.icon({
  iconUrl: require('../../public/images/black-plane.svg'),
  iconRetinaUrl: require('../../public/images/black-plane.svg'),
  iconSize: [32, 32],
});

// 创建标记时直接设置旋转角度
const marker = L.marker([yourLat, yourLng], {
  icon: myIcon,
  rotationAngle: 60, // 旋转60度
  rotationOrigin: 'center center' // 旋转原点
}).addTo(map);

// 之后还能动态修改角度
marker.setRotationAngle(180);

这个方案的API最友好，不用手动操作DOM或SVG字符串，适合长期维护的项目。

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