在R/R标记中同步两个传单贴图

JS传单允许。请参见同步传单地图的示例

我想在

R

和

R标记/knitr

中实现同步传单地图

最好，地图应该水平地彼此相邻显示（就像图中所示）

下面是我想同步的两个地图的最小Rmarkdown（

.Rmd

）示例。 解决方案不必基于

mapview

包。欢迎任何解决方案：

---
标题：“如何同步2张传单地图”
作者：“我”
日期：“2016年4月2日”
输出：html\u文档
---
```{r设置，include=FALSE}
库（“地图视图”）
图书馆（“sp”）
#加载示例数据
数据（meuse）
坐标（meuse）这是一种同步两张传单地图的方法，但不幸的是，它在RStudio Viewer中不起作用。这在Chrome和Firefox中确实起作用。有很多方法可以使这更为可靠。我试图在下面的
R
代码中添加注释来解释发生了什么

---
title: "How to sync 2 leaflet maps"
author: "me"
date: "2 April 2016"
output: html_document
---

```{r SETUP, include=FALSE}
#  get the latest htmlwidgets
#   devtools::install_github("ramnathv/htmlwidgets")
library("htmlwidgets")
library("htmltools")
library("mapview")
library("sp")

# load example data
data(meuse)
coordinates(meuse) <- ~x+y
proj4string(meuse) <- CRS("+init=epsg:28992")
```

```{r MAPS}
mapView(meuse, zcol="copper")@map # MAP 1
mapview(meuse, zcol="soil")@map # MAP 2
```

```{r}
#  crudely add the leaflet-sync plugin
#   attachDependency with the rawgit gave me
#   errors so just do this for now
#   could easily add to a package
#   or make a mini package to import this
#   dependency
tags$script(
  type="text/javascript",
  src="https://cdn.rawgit.com/turban/Leaflet.Sync/master/L.Map.Sync.js"
)
```

```{r}
# this is one of the new htmlwidgets methods
#  to add some code after all htmlwidgets are rendered
#  this is very useful since we need all htmlwidgets rendered
#  before we can sync
onStaticRenderComplete(
'
var leaf_widgets = Array.prototype.map.call(
  document.querySelectorAll(".leaflet"),
  function(ldiv){
    return HTMLWidgets.find("#" + ldiv.id);
  }
);

// make this easy since we know only two maps
leaf_widgets[0].sync(leaf_widgets[1]);
leaf_widgets[1].sync(leaf_widgets[0]);
'
)
```

如果您想要并排使用，这里是实现的基本方法。我们可以利用
shinny:：fluidPage
、
fluidRow
和
列来获得boostrap，但是
css
/
js
对于并排放置来说确实很重

#  get the latest htmlwidgets
#   devtools::install_github("ramnathv/htmlwidgets")
library("htmlwidgets")
library("htmltools")
library("shiny")
library("mapview")
library("sp")

# load example data
data(meuse)
coordinates(meuse) <- ~x+y
proj4string(meuse) <- CRS("+init=epsg:28992")
map1 <- mapView(meuse, zcol="copper")@map # MAP 1
map2 <- mapview(meuse, zcol="soil")@map # MAP 2

tagList(
  tags$head(tags$script(
    type="text/javascript",
    src="https://cdn.rawgit.com/turban/Leaflet.Sync/master/L.Map.Sync.js"
  )),
  tags$div(style="display:inline;width:50%;float:left;",map1),
  tags$div(style="display:inline;width:50%;float:left;",map2),
  onStaticRenderComplete(
'
var leaf_widgets = Array.prototype.map.call(
  document.querySelectorAll(".leaflet"),
  function(ldiv){
    return HTMLWidgets.find("#" + ldiv.id);
  }
);

// make this easy since we know only two maps
leaf_widgets[0].sync(leaf_widgets[1]);
leaf_widgets[1].sync(leaf_widgets[0]);
'
  )
) %>%
  browsable

#获取最新的HTMLWidget
#devtools:：install_github（“ramnathv/htmlwidgets”）
库（“htmlwidgets”）
库（“htmltools”）
图书馆（“闪亮”）
库（“地图视图”）
图书馆（“sp”）
#加载示例数据
数据（meuse）
坐标（meuse）注意，我们已经在包mapview中实现了@timelyportfolio提供的答案，因此现在可以使用
mapview:：sync（）轻松实现
。有关说明和示例，请参见
？mapview:：sync
。
除非我错了，否则我认为它没有在R传单或mapview中实现。您必须在传单（）中自己实现。作为
mapview
包的维护者，我可以确认这目前不可用（虽然我已经有一段时间没有在github上查看最新版本的传单了）。鉴于
mapview
旨在帮助空间分析工作流，我可以问一下同步渲染的目的是什么吗？我想可视化两个不同的层（让我们称它们为变量X和Y）我想让读者看到X高的区域，也显示出高的Y值，并为她/他提供放大特定区域的功能——这就是为什么静态地图不能真正做到这一点。顺便说一句，我不知道JS。我该如何在JS中实现这一点，或者如何
JS/html
code我必须包含在我的
.Rmd
文件中吗？我将仔细查看
传单.Sync
插件，并尝试在
mapview
中实现它。感谢@timelyportfolio提供了这个伟大的答案！！但是，第二个示例似乎不同步。@timelyportfolio有办法将它们并排绘制吗？Cool！谢谢！我想将此功能集成到下一个mapview版本中（目标是6月的第二周）…您是否有兴趣将此功能作为一个功能（可能是
syncView
）到“开发”分支？我不确定我是否有时间，也不想耽误你。请随意使用这些代码。如果你找到了，我将很高兴进行审阅/测试。没问题。我会试试我的运气……干杯
#  http://stackoverflow.com/questions/36373842/synchronizing-two-leaflet-maps-in-r-rmarkdown

#  get the latest htmlwidgets
#   devtools::install_github("ramnathv/htmlwidgets")
library("htmlwidgets")
library("htmltools")
library("mapview")
library("sp")

# load example data
data(meuse)
coordinates(meuse) <- ~x+y
proj4string(meuse) <- CRS("+init=epsg:28992")
map1 <- mapView(meuse, zcol="copper")@map # MAP 1
map2 <- mapview(meuse, zcol="soil")@map # MAP 2

tagList(
  tags$head(tags$script(
    type="text/javascript",
    src="https://cdn.rawgit.com/turban/Leaflet.Sync/master/L.Map.Sync.js"
  )),
  map1,
  map2,
  onStaticRenderComplete(
'
var leaf_widgets = Array.prototype.map.call(
  document.querySelectorAll(".leaflet"),
  function(ldiv){
    return HTMLWidgets.find("#" + ldiv.id);
  }
);

// make this easy since we know only two maps
leaf_widgets[0].sync(leaf_widgets[1]);
leaf_widgets[1].sync(leaf_widgets[0]);
'
  )
) %>%
  browsable

#  get the latest htmlwidgets
#   devtools::install_github("ramnathv/htmlwidgets")
library("htmlwidgets")
library("htmltools")
library("shiny")
library("mapview")
library("sp")

# load example data
data(meuse)
coordinates(meuse) <- ~x+y
proj4string(meuse) <- CRS("+init=epsg:28992")
map1 <- mapView(meuse, zcol="copper")@map # MAP 1
map2 <- mapview(meuse, zcol="soil")@map # MAP 2

tagList(
  tags$head(tags$script(
    type="text/javascript",
    src="https://cdn.rawgit.com/turban/Leaflet.Sync/master/L.Map.Sync.js"
  )),
  tags$div(style="display:inline;width:50%;float:left;",map1),
  tags$div(style="display:inline;width:50%;float:left;",map2),
  onStaticRenderComplete(
'
var leaf_widgets = Array.prototype.map.call(
  document.querySelectorAll(".leaflet"),
  function(ldiv){
    return HTMLWidgets.find("#" + ldiv.id);
  }
);

// make this easy since we know only two maps
leaf_widgets[0].sync(leaf_widgets[1]);
leaf_widgets[1].sync(leaf_widgets[0]);
'
  )
) %>%
  browsable