Leaflet@1.7.1箭头标记尾部中心错位问题求助

问题根源 #

当前问题核心是旋转原点与图标锚点不匹配，再加上可能存在的图标图片尺寸/视觉位置差异，导致两个箭头旋转后尾部无法重合。

修复步骤 #

1. 统一图标图片规格
   确保right-arrow-green.png和right-arrow-light-brown.png两张图片的画布尺寸完全一致（均为33x35像素），且箭头尾部的视觉中心严格处于图片的底部中心位置（像素坐标x约16/17、y=35）。若图片本身尾部位置偏移，即使代码正确也会出现错位。

2. 对齐旋转原点与图标锚点
   你的iconAnchor设置为[16, 35]（对应图标底部中心），但旋转原点用了"center center"（图标元素的中心位置，即x=16.5、y=17.5），两者不重合，旋转时标记会绕中心而非锚点转动，自然出现偏移。

   修改setRotationOrigin为与锚点对应的位置：

   // 方法1：用百分比（推荐，适配缩放场景）
   nacellePositionCloseView.setRotationOrigin("50% 100%");
   windDirectionCloseView.setRotationOrigin("50% 100%");
   
   // 方法2：用像素值（与iconAnchor完全精准对应）
   nacellePositionCloseView.setRotationOrigin("16px 35px");
   windDirectionCloseView.setRotationOrigin("16px 35px");
   

3. 验证图标尺寸一致性
   确认代码中iconSize设置的[33,35]与图片实际像素尺寸完全一致。若图片实际尺寸不同，Leaflet会自动拉伸/压缩图标，导致锚点位置计算错误，此时需调整iconSize为图片真实尺寸，或重新计算iconAnchor（比如图片宽34，半宽为17，锚点x设为17）。

修正后的完整代码示例 #

arrowIconGreen = L.icon({
    iconUrl: '../../content/images/right-arrow-green.png',
    shadowUrl: '',
    iconSize: [33, 35],
    shadowSize: [0, 0],
    iconAnchor: [16, 35], // 图标底部中心对应标记位置
    shadowAnchor: [4, 62],
    popupAnchor: [0, -10]
});
arrowIconBrown = L.icon({
    iconUrl: '../../content/images/right-arrow-light-brown.png',
    shadowUrl: '',
    iconSize: [33, 35],
    shadowSize: [0, 0],
    iconAnchor: [16, 35],
    shadowAnchor: [4, 62],
    popupAnchor: [0, -10]
});

const nacellePositionCloseView = L.marker(new L.LatLng(marker.lat, marker.lng), {
    draggable: false,
    dragging: false,
    autoPan: false,
    icon: arrowIconBrown
}).addTo(satelliteMap);
nacellePositionCloseView.setRotationAngle(360 - Number(nacelleDegree.value));
nacellePositionCloseView.setRotationOrigin("50% 100%"); // 旋转原点改为锚点位置

const windDirectionCloseView = L.marker(new L.LatLng(marker.lat, marker.lng), {
    draggable: false,
    dragging: false,
    autoPan: false,
    icon: arrowIconGreen
}).addTo(satelliteMap);
windDirectionCloseView.setRotationAngle(360 - Number(windDegree.value));
windDirectionCloseView.setRotationOrigin("50% 100%"); // 统一旋转原点

额外检查 #

若调整后仍有偏移，可打开浏览器开发者工具，确认两个标记元素的以下属性：

• transform-origin是否完全一致
• 图标元素的宽高是否相同
• 图片是否存在额外的padding/margin（可通过自定义DivIcon消除默认样式影响）

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