Question

在不同选项卡上同步两个传单地图时遇到问题。

查看以前的条目（Synchronizing two leaflet maps in R / Rmarkdown）后，@ TimSalabim提供的解决方案无效，因为地图位于不同的标签上。

这是一个MWE RMarkdown示例：

---
title: "QuestionforStackOverflow"
output: 
flexdashboard::flex_dashboard:
runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(shiny)
library(leaflet)
```

Tab One
======================================================================
```{r tab1}
output$map1 <-
   renderLeaflet(
    leaflet() %>%
      addProviderTiles("CartoDB.Positron") %>%
      setView(-93.65, 42.0285, zoom = 4)
  )

leafletOutput("map1")

```
Tab Two
======================================================================
```{r tab2}

output$map2 <-
  renderLeaflet(
    leaflet() %>%
      addProviderTiles("CartoDB.Positron") %>%
      setView(-93.65, 42.0285, zoom = 4)
  )

leafletOutput("map2")
```

我想要双向改变。任何视图更改为map1 - 更改map2或对map2的任何更改将更改map1。

理想情况下：如果你在map1上滚动到圣路易斯，map2将在圣路易斯拥有相同的缩放级别。

目前，两张地图之间没有互动性。有没有办法让它们同步？

Answer 1

您可以使用leafletProxy()：请参阅此处的帮助：https://rstudio.github.io/leaflet/shiny.html

对于您的特定问题，这是一个想法：

---
  title: "QuestionforStackOverflow"
  output: 
    flexdashboard::flex_dashboard:
  runtime: shiny
---

```{r setup, include=FALSE}
  library(flexdashboard)
  library(shiny)
  library(leaflet)
```

Tab One
======================================================================

```{r tab1}
output$map1 <-
  renderLeaflet(
    leaflet() %>%
      addProviderTiles("CartoDB.Positron") %>%
      setView(-93.65, 42.0285, zoom = 4)
  )

actionButton("syncMap1", "Fit to map2 bounds")
leafletOutput("map1")

observeEvent(input$syncMap1,{
  map2coords <- input$map2_bounds
  map1Proxy <- leafletProxy("map1")
  map1Proxy %>% fitBounds(lng1 = map2coords$east,
                          lat1 = map2coords$north,
                          lng2 = map2coords$west,
                          lat2 = map2coords$south)
})
```

Tab Two
======================================================================

```{r tab2}

output$map2 <-
  renderLeaflet(
    leaflet() %>%
      addProviderTiles("CartoDB.Positron") %>%
      setView(-93.65, 42.0285, zoom = 4)
  )
actionButton("syncMap2", "Fit to map1 bounds")
leafletOutput("map2")

observeEvent(input$syncMap2,{
  map1coords <- input$map1_bounds
  map2Proxy <- leafletProxy("map2")
  map2Proxy %>% fitBounds(lng1 = map1coords$east,
                          lat1 = map1coords$north,
                          lng2 = map1coords$west,
                          lat2 = map1coords$south)
})
```

想法是在点击按钮时检索其他地图的坐标，然后同步视图。

次要问题：视图没有很好地同步：可以更好地找到显示的地图的质心并使用setView()来使用input$map1_zoom。

主要问题：这意味着使用按钮，这不是用户友好的。从理论上讲，您可以使用observe()块将每个地图的坐标反映到另一个地图上。尝试了它并且它非常多，可能是因为一些“无限”循环，因为坐标中存在微观变化。

Answer 2

不知道如何使用R，但使用纯JavaScript，您可以使用Leaflet.Sync来同步两张地图。

如果你有两个标签，当时只有一个标签可见，你也可以在标签交换机上同步，这更容易实现。

使用Shiny在RMarkdown中的不同选项卡上同步两个透视图

2 个答案: