如何在openCPU应用程序中显示htmlwidgets？

Question

我们想在OpenCPU应用程序中显示一个htmlwidget。由Leaflet生成的html没有问题，但是我们在OpenCPU应用程序中显示它有一些麻烦。我们使用以下函数生成Leaflet Map：

leafmap1 <- function(ecoregion='10105',wdpa_id='1500'){
require(leaflet)
require(shiny)
require(htmlwidgets)
m <- leaflet() %>%
addTiles() %>%  # Add default OpenStreetMap map tiles
addMarkers(lng=174.768, lat=-36.852, popup="The birthplace of R")
m 
}

JavaScript如下：

function SochiCtrl($scope){
$scope.ecoregions = ['10105']
$scope.wdpa_ids = ["1500"]
$scope.ecoregion = $scope.ecoregions[0]
$scope.wdpa_id = $scope.wdpa_ids[0]    
$scope.makeChart = function(){
   var req = ocpu.rpc("leafmap1", 
    {"ecoregion": $scope.ecoregion, "wdpa_id": $scope.wdpa_id}, function(output){   
    $('#map').html(output)
   }).fail(function(text){
     alert("Error: " + req.responseText);
   });
}
$scope.$watchCollection('[ecoregion, wdpa_id]', function(newValues){
  console.log(newValues)
  $scope.makeChart({ecoregion: newValues[0], wdpa_id: newValues[1]})
})
}

现在应用程序显示了Leaflet框架但是我在从OpenCPU获取json时遇到了一些问题我得到了以下错误没有方法asJSON S3类：htmlwidget 。我也尝试过：

m <- toJSON(m, force= TRUE) 

但它似乎无法奏效

完整代码位于：https://github.com/Arevaju/ocpuleaflet。

非常感谢您的帮助和祝贺您的出色工作！

Answer 1

很抱歉，这不是一个经过测试的答案，但这比在评论中更容易解释建议的方法。

我建议让你的函数leafmap1返回纯文本（HTML）而不是传单对象。

您可以看到传单对象继承了类htmlwidget。 对于这个类，存在一个通用函数toHTML的方法，它允许检索这样的HTML代码。

假设一个传单对象：

 m = leaflet() %>% addTiles()

让我们来看看它的课程：

class(m)
[1] "leaflet"    "htmlwidget"

获取底层生成的html：

> (out <- unclass(htmlwidgets:::toHTML(m)))
[[1]]
<div id="htmlwidget-7863" style="width:100%;height:400px;" class="leaflet html-widget"></div>
[[2]]
<script type="application/json" data-for="htmlwidget-7863">{"x":{"calls":[{"method":"addTiles","args":    ["http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",null,null,{"minZoom":0,"maxZoom":18,"maxNativeZoom":null,"tileSize":256,"subdomains":"abc","errorTileUrl":"","tms":false,"continuousWorld":false,"noWrap":false,"zoomOffset":0,"zoomReverse":false,"opacity":1,"zIndex":null,"unloadInvisibleTiles":null,"updateWhenIdle":null,"detectRetina":false,"reuseTiles":false,"attribution":"&copy; <a href=\"http://openstreetmap.org\">OpenStreetMap\u003c/a> contributors, <a href=\"http://creativecommons.org/licenses/by-sa/2.0/\">CC-BY-SA\u003c/a>"}]}]},"evals":[],"jsHooks":[]}</script>
[[3]]
NULL
attr(,"html_dependencies")
attr(,"html_dependencies")[[1]]
[...]

第三个插槽包含依赖项（javascript + css），所以我猜这些已经在您的报告中加载了。

您可以返回前两个组件的连接（功能结果）：

return(paste(out[[1]], out[[2]], sep="\n"))