如何使标记出现在react-leaflet中单击的图像覆盖表面上？

Question

我将 React leaflet 与自定义 CRS、Leaflet CRS 文档一起使用

我想做的是：

1. 自定义图像在地图容器中显示为ImageOverlay
2. 当用户单击图像上的某个位置时，标记将显示在图像顶部ImageOverlay

所以插图是这样的：

这是我的尝试：

地图容器

<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 />

     {/**This is where I display the marker */}
    {routePoints.map((point, index) => (
    <Marker
        key={index}
        position={point}
        icon={L.icon({
        iconUrl: `${playerMarkerAssest}`,
        iconSize: [35, 35],
        })}
    />
    ))}

    {/**This is the image url */}
    <ImageOverlay url={mapAssest} bounds={imageBounds} />
</MapContainer>

使用地图事件

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

在上面的代码中，当用户单击任何位置时，LatLngExpression[]将设置为任何名为的数组RoutePoints

然后根据routePoints（用户点击的点）显示标记

现在的问题是，当用户仅单击某个位置时ImageOverlay，标记会显示在其他位置。如下图所示：

当用户点击顶部的位置时，标记出现在底部

请让我知道我错过了什么，以及如何实现我想要的目标，如上所述。

附上屏幕录像来描述问题 https://youtu.be/o5Hh80WjJ80

2023 年 2 月 7 日更新：

我有控制台记录clicked point和route points（在数组中）的值，

我点击了1点，值为

useMapEvents({
    click: (e) => {
         console.log(e.latlng)

其值为：

{
  lat: 530
  lng: -37
}

routePoint并检查了数组

[{
  lat: 530
  lng: -37
}]

console.log('route points', routePoints);

两个值实际上是相同的

但 UI 中的实际结果仍然显示相同，即“单击顶部，但标记出现在底部”。

请帮忙

Answer 1

我在文档中找到了这个示例，它与您的用例类似，

使用时的一个常见错误CRS.Simple是假设地图单位等于图像像素。在本例中，地图覆盖 1000x1000 单位，但图像大小为 2315x2315 像素。不同的情况会要求 1 像素 = 1 个地图单位，或 64 像素 = 1 个地图单位，或其他任何值。以网格中的地图单位进行思考，然后相应地添加图层（ 等L.ImageOverlays）L.Markers

您可以在 Leaft 中找到解释“像素与地图单位”的部分。

另请注意： 中的坐标CRS.Simple采用 的形式[y, x]而不是，与 Leaflet 使用而不是 的[x, y]方式相同。[lat, lng][lng, lat]