如何在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"))