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

Question

我们想在 OpenCPU 应用程序中显示一个 htmlwidget。该 html 是由 Leaflet 生成的，没有问题，但是我们在 OpenCPU 应用程序中显示它有一些麻烦。我们使用以下函数来生成传单 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) 而不是传单对象。

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