R Shiny应用如何将Leaflet地图扩展为全页面半透明背景适配fluidRow布局

实现方案 #

通过自定义CSS调整元素定位与透明度即可实现需求，完整修改后的代码如下：

library(leaflet)
library(shiny)
library(shinythemes)

ui <- navbarPage(
  title = "The app",
  tabPanel("Reproducible examples are great :)",
           fluidPage(
             # 自定义CSS样式
             tags$style(HTML("
              /* 设置内容区为相对定位，作为地图的定位参照 */
              .tab-content > .active > .fluidPage {
                position: relative;
                min-height: calc(100vh - 120px);
                padding: 15px;
              }
              /* 地图设置为绝对定位，铺满整个内容区置于底层 */
              #map {
                position: absolute !important;
                top: 0;
                left: 0;
                width: 100% !important;
                height: 100% !important;
                z-index: 0;
              }
              /* 所有列默认设置半透明白色背景，层级高于地图 */
              .column {
                background: rgba(255, 255, 255, 0.85);
                padding: 15px;
                border-radius: 4px;
                position: relative;
                z-index: 1;
                margin-bottom: 15px;
              }
              /* 原地图所属的第二行第一列设为透明背景，透出底层清晰地图 */
              .fluidPage > .fluidRow:nth-of-type(2) > .column:nth-of-type(1) {
                background: transparent;
                padding: 0;
              }
             ")),
             # 地图移到最外层作为背景
             leafletOutput("map", height = "100%"),
             # 第一行内容
             fluidRow(
               column(2,
                      selectInput("city", "Select city:",
                                  c("Beirut", "Cairo", "Bagdad"),
                                  selected = "Beirut"
                      ),
                      actionButton("start", "Start",
                                   style = "color: black;
                                           background-color: #ffcc00;")
               ),
               column(5,
                      "Content is here ...",
                      br(),
                      sliderInput("slider1", "",
                                  min = 1,
                                  max = 100,
                                  value = 30,
                                  ticks = TRUE)
               ),
               column(5,
                      "... and there and ...",
                      br(),
                      sliderInput("slider2", "",
                                  min = 1,
                                  max = 100,
                                  value = 30,
                                  ticks = TRUE)
               )
             ),
             # 第二行内容
             fluidRow(
               column(7), # 原地图位置留空，背景透明透出底层清晰地图
               column(5,
                      "... also here ...",
                      br(),
                      sliderInput("slider3", "",
                                  min = 1,
                                  max = 500,
                                  value = 30,
                                  ticks = TRUE),
                      "... and even down there",
                      br(),
                      sliderInput("slider4", "",
                                  min = 1,
                                  max = 500,
                                  value = 30,
                                  ticks = TRUE)
               )
             )
           )
  ),
  theme = shinytheme("cosmo")
)

server <- function(input, output) {
  output$map <- renderLeaflet({
    leaflet(data = NULL,
            options = leafletOptions(zoomControl = FALSE,
                                     dragging = TRUE)) |>
      addTiles(
        options = providerTileOptions(noWrap = TRUE)) |>
      setView(lng = 35.5051, lat = 33.889, zoom = 14) |>
      addScaleBar(position = "bottomleft")
  })
}

shinyApp(ui, server)

如果需要调整半透明区域的显示效果，可以修改CSS中rgba(255, 255, 255, 0.85)的第四个参数，数值越低透明度越高，地图显示越清晰。

内容的提问来源于stack exchange，提问作者bathyscapher