更新状态而无需重新渲染ArcGIS地图

Question

我正在使用React和ArcGIS构建一个交互式地图，该地图将允许用户执行以下操作：

1. 更新地图上显示的数据层（郊区，地方政府区域等）
2. 更新了地图的视口（缩放和居中）

我遇到的问题是视口，特别是“缩放”和“中心”。例如，如果有人放大然后更新数据层，它将恢复为初始状态的视口设置。

作为参考，这是我正在尝试实现的一个React交互示例：https://www.fremantleports.com.au/the-port/port-map。如您所见，它使您可以更新显示的数据层（建筑物，泊位等），而无需恢复为原始缩放设置。

为达到上述效果，我尝试了两种方法：

1. useState，然后将“活动层”从“侧边栏组件”传递到“地图组件”。问题在于，每当用户更改显示的数据层时，它将恢复为初始状态的视口设置。
2. useContext（以及react-tracked和ArcGIS watchUtils functions），并使用全局状态跟踪activeLayers，缩放和居中。但是，问题在于，每当用户更改缩放级别时，地图都会重新渲染。

目标

https://www.fremantleports.com.au/the-port/port-map

问题

上述方法中哪种更可取，我该如何使用该方法来实现预期的目标？

Answer 1

当用户执行将更改地图的动作时，必须重新渲染地图。 我想说你应该使用useState来处理数据层和缩放级别的状态。

但是，请确保您拥有两个单独的状态值，一个用于图层，一个用于缩放级别。然后，在渲染地图组件时，将两个状态都传递给地图组件，以便它将使用先前/新的缩放级别和图层进行渲染。 如果图层发生了更改，而缩放级别没有更改，则先前的级别将传递到地图组件，并且不会初始化它。

然后，您还可以使用useMemo（Documentation）保存一些不需要的渲染（防止在值未更改时重新渲染）。