Question

在React中构建地图界面。

有一个包装器div和一个子SVG，它是地图。也是位于地图上某个位置的子标记元素。

地图和包装是1920px×1080px。

<div id="wrapper">
    <svg />
    <Marker />
</div>

我正在尝试解决2个用例。我可以解决其中一个问题，但两者都证明很难。

案例A ：地图需要以标记坐标为中心，从该点进行缩放和旋转并使其保持居中（它是移动目标）。

案例B ：用户可以平移缩放并旋转他们在地图上触摸的地图。

案例A和B不会同时启用。

要解决案例A包装器上的这个css工作：

transform: `translate3d(${(960 - x)}px, ${(540 - y)}px, 0) scale(${zoom}) rotate(${rotate}deg)`

其中x和y是您要设置为地图原点的像素坐标，缩放和旋转是缩放和旋转。 960和540是地图宽度和高度的一半。这适用于案例A。

案例B 非常棘手，因为变换原点需要位于用户触摸地图的位置，因此需要从该点开始缩放旋转和缩放。为此，我一直在尝试动态设置transform-origin。

问题是在这两种模式之间以及触摸之间移动，以便地图保持正确的翻译。

我考虑过在父元素上进行翻译，在子元素上进行旋转和缩放。比如下面的伪代码：

<div id="wrapper" style={{translation(x,y)}} >
    <svg style={{ rotation(rotate), scale(zoom), transformOrigin(origin) }} />
    <Marker />
</div>

但我认为这会使案例A

变得棘手