Javascript 将传单控件放置在有光泽的环境中的map div外部

是否可以在有光泽的环境中将传单控件移动到map div之外

例如：

从以下代码：

library(shiny)
library(leaflet)

shinyApp(

  ui <- fluidPage(
    sidebarPanel("This is where I want to put the leaflet layers control", width = 3), 
    mainPanel(
      leafletOutput("map", width = "100%"), 
      width = 9)
  ), 

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

    output$map <- renderLeaflet({
      leaflet() %>% 
        addProviderTiles("Esri.WorldTerrain", group = "Layer1") %>% 
        addProviderTiles("Esri.WorldImagery", group = "Layer2") %>% 
        addLayersControl(position = "topleft", 
                         baseGroups = c("Layer1", "Layer2"), 
                         options = layersControlOptions(collapsed = F))
    })  # END RENDERLEAFET
  }  # END SERVER
)  # END SHINYAPP

库（闪亮）
图书馆（单张）
shinyApp(
ui%
addLayersControl（position=“topleft”，
基本组=c（“第1层”、“第2层”），
选项=图层控制选项（折叠=F））
})#端部渲染器AFET
}#终端服务器
)#结束SHINYAPP

我看到了，但它是针对传单.js的，它与Shiny有很大的不同。有什么方法可以做到这一点吗？

使用JS（部分？）是可能的

在Shining中使用JS

在shiny

库（shinyjs）

中使用JS是一个很好的快捷方式。在ui端使用

useShinyjs（）

，在服务器端使用

runjs（）

修改HTML

当您想要修改DOM时，您必须知道必须等到DOM完全构建完成后才能修改它。使用

session$onflush（function（）{}

确保仅在DOM完全生成时才开始修改

重新定位HTML元素

首先，您必须知道要重新定位的元素以及要将其插入的目标的名称。为此，请运行应用程序（在浏览器中）右键单击所需元素并选择“检查”。 接下来，程序是将“要重新定位的元素”保存在变量中，将其从映射中删除，并将其添加到映射之外

JS代码可能如下所示：

     var targetName = "div.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control"
     var target = document.querySelector(targetName);
     var dest = document.querySelector("div.col-sm-3");
     document.querySelector(targetName).remove()
     dest.appendChild(target)

挑战 如果你把这些放在一起，你会注意到，控件不在灰色框内，而是在它下面。考虑到上面的代码，原因是它被附加到

div.col-sm-3

而不是

form.well

（因为它不适用于

form.well

）。我想在UI

标签$div（id=“insertContainer”和“）

并将其插入其中，但这也不起作用。我不知道进入灰色框对你有多重要，可能看起来会更好。也许有人可以帮助你

代码

library(shiny)
library(leaflet)
library(shinyjs)

  ui <- fluidPage(
    useShinyjs(),
    sidebarPanel(HTML("This is where I want to put the leaflet layers control"), width = 3, height = 5), 
    mainPanel(
      leafletOutput("map", width = "100%"), 
      width = 9)
  )

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

    session$onFlushed(function() {
      runjs('
             var targetName = "div.leaflet-control-layers.leaflet-control-layers-expanded.leaflet-control"
             var target = document.querySelector(targetName);
             var dest = document.querySelector("div.col-sm-3");
             document.querySelector(targetName).remove()
             dest.appendChild(target)
      ')
    })

    output$map <- renderLeaflet({
      leaflet() %>% 
        addProviderTiles("Esri.WorldTerrain", group = "Layer1") %>% 
        addProviderTiles("Esri.WorldImagery", group = "Layer2") %>% 
        addLayersControl(position = "topleft", 
                         baseGroups = c("Layer1", "Layer2"), 
                         options = layersControlOptions(collapsed = F))
    })  # END RENDERLEAFET
  }  # END SERVER


runApp(shinyApp(ui, server), launch.browser = TRUE)

库（闪亮）
图书馆（单张）
图书馆（shinyjs）
ui%
addLayersControl（position=“topleft”，
基本组=c（“第1层”、“第2层”），
选项=图层控制选项（折叠=F））
})#端部渲染器AFET
}#终端服务器
runApp（shinyApp（用户界面，服务器），launch.browser=TRUE）

图层和缩放控制或仅图层？答案对您有效吗？这对给定的示例有效，但不幸的是，对我的实际应用程序无效，因为有多个传单窗格和井面板，我认为这会混淆js代码！因此targetName和dest都不是唯一的。接受是因为它在技术上不唯一请记住要求的内容，但仅当您有一个传单窗格和井面板时才能应用。