如何制作传单图和输入/输出的绝对面板全屏？

Question

我想单击一个按钮来制作传单地图并将所有覆盖的输入全屏显示。

使用以下示例，我可以使地图全屏显示，但我丢失了输入（在本例中为

h1("test")

）。或者我可以保留地图顶部的输入，但地图不会按预期全屏绘制。

library(leaflet)
library(shiny)

js <- "
function openFullscreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}"



ui <- fluidPage(
  tags$scrip(HTML(js)),
  actionButton("fullscreen", "Full Screen Container",
               onclick = "openFullscreen(document.getElementById('map_container'))"),
  actionButton("fullscreen", "Full Screen Map Only",
               onclick = "openFullscreen(document.getElementById('map'))"),
  div(
    id = "map_container",
    leafletOutput(height = "100px", "map"),
    absolutePanel(
      top = 20,
      right = 20,
      h1("test", style = "color:white")
    )
  )
)

server <- function(input, output, session) {

  output$map <- renderLeaflet({
    leaflet() %>% 
      addProviderTiles('Esri.WorldImagery') %>% 
      setView(lng = 118.2437, lat = 34.0522, zoom = 5)
  })
}

shinyApp(ui, server)

更新

我尝试在

this

的基础上将

z-index: 10000 !important;

添加到h1()样式中，但是最大化传单图时它仍然是隐藏的。

Answer 1

library(leaflet)
library(shiny)

js <- "
function openFullscreen(elem) {
  var map = $(elem).find('.leaflet.html-widget');
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
  $(map).css('height', '100vh').trigger('resize');
}

document.addEventListener('fullscreenchange', exitHandler, false);
document.addEventListener('mozfullscreenchange', exitHandler, false);
document.addEventListener('MSFullscreenChange', exitHandler, false);
document.addEventListener('webkitfullscreenchange', exitHandler, false);

function exitHandler(){
  if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement) return;
  $('#map').css('height', '400px').trigger('resize');
}
 
"



ui <- fluidPage(
    actionButton(
        "fullscreen", "Full Screen Container",
         onclick = "openFullscreen(document.getElementById('map_container'))"
    ),
    div(
        id = "map_container",
        leafletOutput(height = "400px", "map"),
        absolutePanel(
            top = 20,
            right = 20,
            style = "color: #FFF",
            h1("test", style = "color:white"),
            selectInput("in2", "choose", 1:5),
            numericInput("in3", "number", 0, 0, 10)
        )
    ),
    tags$scrip(HTML(js))
)

server <- function(input, output, session) {
    
    output$map <- renderLeaflet({
        leaflet() %>% 
            addProviderTiles('Esri.WorldImagery') %>% 
            setView(lng = 118.2437, lat = 34.0522, zoom = 5)
    })
}

shinyApp(ui, server)

解释：

1. 如果您希望控件也全屏显示，我们需要全屏显示容器，而不仅仅是地图。
2. 传单地图具有固定高度

   400px

   ，因此在全屏下，首先将其高度更改为最大屏幕高度

   100vh

   。这还不足以让传单调整地图，我们还需要触发

   resize

   事件。
3. 当用户更改全屏状态时，我们需要将地图大小调整回原始大小。为此，我们使用

   addEventListener

   来观看屏幕更改事件。取决于浏览器，事件名称不同，但我们附加相同的回调

   exitHandler

   。

4. exitHandler

   首先检查不同的浏览器，如果我们处于全屏或正常屏幕。如果是正常屏幕，请将地图调整为原始大小。