将 Leaflet 地图合并到 R 中的 revealjs 演示文稿中

Question

我正在尝试将带有图块的 Leaflet 地图添加到在 R 中创建的 revealjs_presentation 中。此地图在 ioslide 或 html 格式中呈现良好，但在 revealjs_presentation 中呈现不佳格式（主要问题：所有字体都太大，地图在选择时在多边形边界周围有奇怪的伪影）。因为该地图在其他输出格式中运行良好，我怀疑这个问题与 revealjs_presentation 和传单之间的某种 CSS 不兼容有关。

为了隔离两组代码，我使用 htmlwidgets 保存了传单地图。该地图看起来不错，但似乎无法使用例如 iframe 将此本地 html 文件嵌入到演示文稿中。由于我不是 CSS 专家，我将不胜感激有关如何解决此问题的任何指导。如果有人制作了带有弹出窗口的交互式传单地图，并在 R 中以 revealjs_presentation 格式正确呈现，我将很高兴看到该代码的某些部分。对于它的价值，传单地图代码是：

leaflet(x) %>% 
addPolygons(popup = popup, weight = 0.7, fillColor = ~pal(quintf), 
          color = 'white', fillOpacity = 1, opacity = 1, 
          smoothFactor = 0.8) %>%

addLegend(pal = pal, values = x$quintf, title = "CXI Activity", 
        position = 'bottom right')

此文件保存正确（例如下面的代码），但在 iframe 中引用它会破坏编织 html 文件的自包含性质。

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

Answer 1

正如您已经猜到的那样，您可以通过添加一些自定义内容来解决字体过大的问题 CSS。假设您要修复任何弹出窗口和地图图例的字体。首先，打开一个新的文本文件并添加以下内容：

.reveal section .leaflet-popup-content {
    font: 20px;
}

.reveal section .leaflet-control {
  font: 24px;
}

根据需要调整相对字体大小。在与 RMarkdown 文件相同的目录中将文件另存为 leafletfont.css（或任何您想调用的名称）。

您现在需要做的就是在演示文稿的开头添加对新 CSS 文件的调用：

---
title: "Habits"
author: John Doe
date: March 22, 2005
output: 
  revealjs::revealjs_presentation
  css: leafletfont.css 
---

您的字体现在应该大小合适了。

P.S。我怎么知道使用“.leaflet-popup-content”和“.leaflet-control”CSS 选择器？通过右键单击地图的相关元素——即一旦它在我的 Chrome 浏览器中以 HTML 呈现——并选择 "Inspect".

将 Leaflet 地图合并到 R 中的 revealjs 演示文稿中

Incorporate Leaflet map in revealjs presentation within R

r

leaflet

r-markdown

reveal.js