【问题标题】:Is there a way to toggle temporarily (hide/show) a leaflet map (specifically under react)?有没有办法临时切换(隐藏/显示)传单地图(特别是在反应下)?
【发布时间】:2022-11-18 09:05:41
【问题描述】:

我有一个多分区站点,用户在分区之间切换。

在其中一个分区上有一张传单地图。当用户导航到它时,它会加载,当他们离开时,它显然会关闭,因为它不再被渲染。

我要解决的问题是尽量减少刷新时间。显然传单至少需要一些时间来构建地图、拉入图块、确定位置、添加额外的图层等,虽然很短,但对用户来说仍然是一个明显的“刷新”,另外这是在内部网络上这是带宽有限的,因此每次必须重新下载相同的图块都会影响(尽管很小)其他资源的网络。

有没有一种快速的方法可以简单地“最小化”它以便用户察觉不到,而不是在用户切换分区时删除地图?即使它只是将宽度/高度设置为 0。这样地图可以处于“暖”状态以便快速显示。或者有没有办法保存所需的部分以便快速重新渲染。

【问题讨论】:

  • 多分区是什么意思,您能否分享您的代码结构和您网站上的打印屏幕?我经常使用 Tabs,我使用的库可以选择保持选项卡挂载:mantine.dev/core/tabs
  • 这将需要一些工作才能将其简化为一个最小示例……但基本上我有 3 个不同的“网页”,用户可以在这些页面之间切换。如果他们切换到地图分区/选项卡然后它呈现,关闭该页面然后它消失(基本上是 <MapContainer> 之前的 if 语句)。我将看一下选项卡视图。

标签: javascript leaflet show-hide react-leaflet


【解决方案1】:

也许您可以将另一个元素呈现在与地图相同的空间中,但 z-index 更高。

【讨论】:

    猜你喜欢
    • 2019-11-30
    • 2021-12-19
    • 2019-02-04
    • 2016-04-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多