1

我对 react-leaflet 和 react 比较陌生，并且在我的地图上绘制新组件时遇到了麻烦。我已经被困了一个星期了，所以希望有人能帮忙。我正在尝试从地图上的功能组中清除组件（图层？），然后通过更改父组件的状态来呈现新组件。

在位于此沙箱的最小示例程序中，我有一些组件：

Map包含地图状态、标记、查询数据、地图边界和选择框值的父组件

  // state for initial map loading
  let [map, setMap] = useState(null);
  // states in Map component
  let [data, setData] = useState();
  let [bounds, setBounds] = useState(null);
  let [featureNum, setFeatureNum] = useState(1);
  // some random markers simulating user placed markers on map
  let [markers, setMarkers] = useState([
    [27.147144835991796, 31.530761718750004],
    [28.844673680771795, 33.662109375],
    [26.86328062676624, 35.804443359375]
  ]);

Select这是一个下拉菜单，用于设置featureNum选择框值更改时的状态。

Line这是一个 Geojson 功能，它从datastate 接收数据并设置markers. 存在于特征组中。

Markers它使用 的状态创建标记特征markers。存在于特征组中。

在地图的初始渲染之后，当featureNum更改状态时，geojson 数据通过我的组件fetch中的 API异步获取。Map新接收到的数据的边界是根据解析计算的，并且使用状态设置器设置data和bounds设置的状态。使用 useRef 挂钩清除功能组，并.clearLayers()

但是，设置Line后，地图上不会出现新组件data。地图飞到组件应该出现的新边界。我尝试将功能组的 z-index 设置为 9999，但这也不起作用。

从Select组件中选择特征时， 如何清除特征组的地图并在地图上显示新Line组件？谢谢！

4

1 回答 1

1

这行代码似乎完成了它的工作，它清除了所有属于featureGroup. 在第一次渲染时，它不会进入您的if (map)语句，因为map它是null第二次在您更改下拉列表时重新渲染，如果您在setData通话中登录

console.log("setData", featureGroupRef.current.getLayers());

你会看到图层是空的[]。

所以你应该做的是首先摆脱那条线

featureGroupRef.current.clearLayers();

然后使用此组件来更改 GeoJSON 的数据，因为dataprop 是不可变的，因此更改值不会触发重新渲染并保持您之前的样式。您最终将在 Line 组件上使用相同的代码，但GeoJson您将使用GeoJsonWithUpdates将其重命名为您认为更合适的任何内容，而不是 react-leaflet 的组件。

演示

于 2021-09-26T13:09:41.643 回答