时间戳

首页 > 解决方案 > 如何在shinyR中创建一个按钮，其事件与传单地图中的多边形绘图工具栏相同

javascript - 如何在shinyR中创建一个按钮，其事件与传单地图中的多边形绘图工具栏相同

问题描述

我想在 shinyR 中创建一个按钮，该按钮与传单地图中的多边形绘图工具栏相同。我试图弄清楚如何手动触发从 R 到 Leaflet 多边形的事件。基本上，我希望如果单击shinyR 中的按钮，我可以使用传单绘图工具栏以相同的方式开始绘制多边形。

我将指令从 R 发送到 Javascript，如下所示：

从用户界面方面：

    drw <- tags$script(HTML(
    "
    Shiny.addCustomMessageHandler(
    'drw_pol',
     const onCreate =(e)=> {
        var e = document.createEvent('Event');
        e.initEvent('click', true, true);
        var cb = document.getElementsByClassName('leaflet-draw-draw-polygon');
        return !cb[0].dispatchEvent(e);
     };
    "
    ))
    
    drw,
    tags$button(type="button", id = "polygon_button", 'handler', style='color:#3399FF ;background-color: Transparent',
              class="btn action-button shiny-bound-input"),
    leafletOutput("map")

表单服务器端：

      hit <- function(){
        onClick={(e)= {onCreate(e)}}
      }
      
      observeEvent(input$polygon_button, {
        function(x) {
          session$sendCustomMessage(
            "drw_pol", hit()
          )
        }
      })

不幸的是，我的代码不起作用。我最大的挑战是如何将点击事件从 R 发送到 Shiny。点击事件是通过 R 中的 hit() 函数创建器从 R 发送的。请你告诉我我错过了什么？

标签： javascriptrshinyleaflet.draw

解决方案

I come up to a simple solution with the package shinyjs:

in UI:

jspolygon <- "shinyjs.polygon_click = function(){
    var e = document.createEvent('Event');
    e.initEvent('click', true, true);
    var cb = document.getElementsByClassName('leaflet-draw-draw-polygon');
    return !cb[0].dispatchEvent(e);
}"
  useShinyjs(),
  shinyjs::extendShinyjs(text = jspolygon, functions = c("polygon_click"))

in server:

  observeEvent(input$polygon_button, {
    js$polygon_click()
  })

推荐阅读