【问题标题】:Leaflet map tiles not visible in reveal.js presentation within R?传单地图图块在 R 中的reveal.js 演示文稿中不可见?
【发布时间】:2017-11-27 13:30:22
【问题描述】:

简介:

我正在尝试将传单地图嵌入到 RMarkdown 文件中的 Revealjs 演示文稿中。我下面的例子非常接近,但它是(1)缺少瓷砖,(2)弹出窗口没有显示,(3)图例和字体太大了!

目前我不太关心代码块的外观。我计划在我的最终产品中使用results = "hide" 幻灯片选项。

提前致谢!

可重现的示例:

---
title: "My Presentation"
author: Me
date: 2017-06-23
output:
    revealjs::revealjs_presentation:
        theme: black

---

## Loading in necessary packages:
```{r}
library(dplyr)
library(sp)
library(rgdal)
library(rgeos)
library(RColorBrewer)
library(classInt)
library(leaflet)
library(htmlwidgets)
```

## Defining our data:
```{r}
lat <- c(45.51158000, 45.50431159, 45.496539)
lon <- c(-122.548056, -122.54775, -122.54788)
no2 <- c(17.37, 25.61, 24.69)

dta <- data.frame(lat, lon, no2)
colnames(dta) <- c("lat","lon","no2")
```

## Create layer of spatial points:
```{r}
points <- SpatialPointsDataFrame(data.frame(x=dta$lon, y=dta$lat), data = data.frame(dta$no2))

plotclr <- (brewer.pal(7, "RdYlGn"))
class <- classIntervals(dta$no2, n = 7, style = "fixed", fixedBreaks = c(0,5,10,15,20,25,30))
colcode <- findColours(class, rev(plotclr))
plot(points, col=colcode, pch=19)

pop1<-paste0("<b>NO2:</b> ", dta$no2, " ppb", 
         "<br /> <b>Lat:</b> ", dta$lat, 
         "<br /> <b>Lon:</b> ", dta$lon) 
```

## Creating the leaflet map:
```{r}
no2_map <-leaflet()%>%
  addTiles('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png') %>%
  addCircleMarkers(data=points, color = "black", radius = dta$no2, fillColor = colcode, fillOpacity=0.7, weight=1, popup=pop1) %>%
  addLegend(position = "bottomright", colors = rev(plotclr), labels = rev(c("30","25","20","15","10","5","0")), opacity = 0.9, title = "NO2 (ppb)")
```

---
```{r}
no2_map

saveWidget(no2_map, file="map.html")

```

【问题讨论】:

    标签: r leaflet r-markdown reveal.js rpres


    【解决方案1】:

    很遗憾,reveal.js 和 Leaflet 不能很好地配合使用,并且带有地图的幻灯片可能缺少图层。这是因为 Leaflet 无法识别用作地图容器的 DOM 元素的大小,因为reveal.js 会动态调整所有元素的大小。

    最简单的解决方法是在带有 Leaflet 地图的幻灯片中刷新页面。你也可以尝试延迟调用map.invalidateSize()(在纯Javascript中使用setTimeout()

    【讨论】:

    • here 之前我已经看到它做得很好。但是没有Javascript经验。如果没有明确的方法让地图看起来正确,那么我可能会放弃这种方法以获得更简单的方法。
    • 作为查看最后评论的其他人的注释:链接的演示文稿实际上使用 iframe 嵌入相应的地图。因此,内部似乎没有直接的传单地图显示演示文稿。
    猜你喜欢
    • 2017-03-15
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-09-10
    • 2015-10-31
    • 2014-08-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多