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

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)

更新

我试过在的基础上在h1()样式中添加z-index: 10000 !important;，但是在最大化传单图的时候还是隐藏了

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)

解释：

如果你想让控件也全屏，我们需要全屏容器，而不仅仅是地图。
传单地图具有固定高度400px，因此在全屏模式下，首先将其高度更改为最大屏幕高度100vh。这还不足以让传单调整地图，我们还需要触发 resize 事件。
当用户改变全屏状态时，我们需要将地图调整回原来的大小。为此，我们使用 addEventListener 来观看屏幕更改事件。视浏览器而定，事件名称不同，但我们附加相同的回调exitHandler.
exitHandler 首先检查不同的浏览器，我们是全屏还是普通屏幕。如果是正常屏幕，请将地图调整为原始大小。

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

How to make leaflet map and absolutePanel of inputs / outputs full screen in shiny

r

leaflet

shiny