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

Question

我们想在 OpenCPU 应用程序中显示一个 htmlwidget。html 由 Leaflet 生成没有问题，但是我们在 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 时遇到了一些问题，我收到以下错误 No method asJSON S3 class: htmlwidget。我也试过：

m <- toJSON(m, force= TRUE) 

但它似乎不起作用。

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

非常感谢您的帮助，并祝贺您的​​出色工作！

Answer 1

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

我的建议是让您的函数 leafmap1 返回纯文本 (HTML) 而不是传单对象。

可以看到leaflet对象继承了类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"))