React-Leaflet点击ImageOverlay时标记点位置偏移问题求助

需求 #

• 通过ImageOverlay在地图容器中展示自定义图片
• 用户点击图片区域时，在点击位置上方显示标记点

问题 #

点击ImageOverlay上的位置后，标记点显示位置错误（例：点击图片上方区域，标记点出现在下方）。打印点击事件的e.latlng与存储到routePoints数组的坐标数值完全一致，但UI层面标记点仍偏移。

尝试代码 #

地图容器代码 #

<MapContainer
    center={[250, 500]}
    zoom={0}
    style={{ height: '100vh', width: '100%' }}
    crs={L.CRS.Simple as CRS}
    maxZoom={2}
    zoomControl={false}
    doubleClickZoom={false}
    scrollWheelZoom={false}
    dragging={false}
>
    <MapClick />

    {/* 标记点展示区域 */}
    {routePoints.map((point, index) => (
        <Marker
            key={index}
            position={point}
            icon={L.icon({
                iconUrl: `${playerMarkerAssest}`,
                iconSize: [35, 35],
            })}
        />
    ))}

    {/* 图片Overlay */}
    <ImageOverlay url={mapAssest} bounds={imageBounds} />
</MapContainer>

useMapEvents代码 #

useMapEvents({
    click: (e) => {
        setRoutePoints([...routePoints, e.latlng]);
    },
});

补充信息（2023年7月2日更新） #

点击某点时，控制台输出：

• e.latlng：

{
  "lat": 530,
  "lng": -37
}

• routePoints数组：

[{
  "lat": 530,
  "lng": -37
}]

二者数值完全一致，但标记点位置仍错误。

解决方案 #

1. 修正ImageOverlay的bounds参数 #

L.CRS.Simple的坐标原点为左上角，lat值越大代表位置越靠下，若imageBounds的上下边界设置颠倒，会直接导致坐标映射反转。需确保bounds匹配图片实际尺寸，例如图片高度为imgHeight、宽度为imgWidth，则正确的bounds应为：

const imageBounds = L.latLngBounds([0, 0], [imgHeight, imgWidth]);

2. 翻转点击坐标的Y轴（Lat值） #

若图片的坐标系与Leaflet Simple CRS的Y轴方向相反（部分场景下图片的Y轴向下为正，但映射到Leaflet时逻辑反转），需要对点击事件的lat值进行翻转：

// 假设imgHeight为图片的实际高度
useMapEvents({
    click: (e) => {
        const correctedPoint = {
            lat: imgHeight - e.latlng.lat,
            lng: e.latlng.lng
        };
        setRoutePoints([...routePoints, correctedPoint]);
    },
});

3. 调整Marker图标的锚点 #

默认Marker的图标锚点为中心，若你的标记图标需要底部对齐点击位置，需设置iconAnchor参数：

icon: L.icon({
    iconUrl: `${playerMarkerAssest}`,
    iconSize: [35, 35],
    iconAnchor: [17.5, 35] // 锚点设为图标底部中心，确保标记点精准对准点击位置
})

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