如何使用react map gl库更改地图样式后重新初始化源和图层

Question

我正在尝试使用 React Map gl 库组件将地图视图从街道更改为卫星视图，但出现编译器控制台错误，无法找到相应图层的源。我默认使用该库的源和图层组件，它在初始页面加载时工作正常，但似乎不适用于更改地图样式。此外，即使编译器生成相同的控制台错误，图层也能在地图上正常显示。

有人可以帮我诊断其背后的原因并彻底解决它吗？

Answer 1

经过一番研究，终于找到了解决办法。 React Map gl 库的 ReactMapGL 组件中存在一个名为 preventStyleDiffing 的道具，如果将其设置为 true，每当我们尝试将地图样式从一个选项切换到另一个选项时，将阻止内部库代码找到样式属性的差异。采用这种方法为我清除了编译器生成的问题。

Answer 2

我发现，如果您要保留样式的状态，则需要将其作为 Map 的键传递。这里的最佳实践是使用reuseMaps并跟踪id属性中的样式：

<Map
  key={mapStyle}
  reuseMaps
  id={`${MapId}-${mapStyle}`}
>
  {/* Your sources and layers here */}
</Map>