3

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

查看以前的条目（在 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 上滚动到 St. Louis，map2 在 St. Louis 上将具有相同的缩放级别。

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

4

2 回答 2

2

您可以使用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()using可能会更好input$map1_zoom。

主要问题：这意味着使用按钮，什么不是用户友好的。从理论上讲，您可以使用一个observe()块将每个地图的坐标反映到另一个。试过了，它有很多错误，可能是因为一些“无限”循环，因为坐标中有微小的变化。

于 2016-07-01T14:42:07.473 回答
0

不知道这将如何与 R 一起工作，但使用纯 JavaScript，您可以使用Leaflet.Sync来同步两个地图。

如果您有两个选项卡，其中只有一个是可见的，您也可以在选项卡开关上同步，这更容易实现。

于 2016-06-25T10:11:35.253 回答