无法通过 R-Shiny 显示 Leaflet HTML（404 错误）。如何将 KML 文件与 rMaps 或 Leaflet-shiny 集成？

Question

我在显示包含 KML 文件的 R-Shiny 中的交互式地图时遇到了一些问题。我安装了leaflet-plugins 并且能够创建一个在浏览器中正确显示但在 Shiny 中不正确显示的 HTML 文件。此尝试遵循示例 here - 如果您查看源代码，则代码可用。

因为这个初始版本不需要更改 HTML 本身，所以我尝试按照示例 here 将原始 HTML 包含在我的页面中，但我收到了 404 错误以及当我尝试包含它时作为R-Shiny 中的iframe（在this discussion 之后）。然后我为 KML 文件和 HTML 文件设置了一个面向外部的服务器，并得到了相同的结果。

我能够使用leaflet-shiny 获得没有 KML 文件的地图，但坦率地说，我不确定如何添加 KML 文件，也没有在文档中看到这一点。

最后，我尝试了rMaps，它确实有一个“addKML”方法，但我无法让它处理我服务器上不同位置的文件（

map1 = Leaflet$new()
map1$setView(c(45.5236, -122.675), 13)
map1$tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
map1$addKML('http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml')
map1

它可以在没有 $addKML 行的情况下工作。可能值得注意的是，示例 1 here 上的 tilelayer 行也导致了空白地图。

实际上，我在托管仍为 unresolved 的派生标题图层时遇到了一些可能类似的问题，这是我选择在此应用程序的演示版本中使用 KML 图层的原因之一，这也是我在此处标记 networking 的原因.我正在使用数字海洋。

感谢您的任何想法或建议。

Answer 1

我认为 rMaps 库中可能存在一个小问题。如果您检查 config.yml 文件 https://github.com/ramnathv/rCharts/blob/master/inst/libraries/leaflet/config.yml 你会看到 内容分发网络（cdn）有参考 “http://harrywood.co.uk/maps/examples/leaflet/leaflet-plugins/layer/vector/KML.js”。这个 KML 阅读器是来自https://github.com/shramov/leaflet-plugins/blob/master/layer/vector/KML.js 的传单插件。当内容在本地交付时：

  css: [external/leaflet.css, external/leaflet-rCharts.css, external/legend.css]
  jshead:
    - external/leaflet.js
    - external/leaflet-providers.js
    - external/Control.FullScreen.js

没有对此 javascript 文件的引用。我们可以解决这个问题：

require(yaml)
leafletLib <- file.path(find.package("rMaps"), "libraries", "leaflet")
rMapsConfig <- yaml.load_file(file.path(leafletLib, "config.yml"))
# add a kml library
kmlLib <- readLines("http://harrywood.co.uk/maps/examples/leaflet/leaflet-plugins/layer/vector/KML.js")
write(kmlLib, file.path(leafletLib, "external", "leaflet-kml.js"))
# add the library to config.yml
rMapsConfig$leaflet$jshead <- union(rMapsConfig$leaflet$jshead , "external/leaflet-kml.js")
write(as.yaml(rMapsConfig), file.path(leafletLib, "config.yml"))

现在config.yml 将包含指向 KML 阅读器的必要链接，并且现在在 external/leaflet-kml.js 中存储了一个本地副本。但是，我们的示例仍然无法正常工作，因为我们将获得 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml. 这可以通过将资源移动到同一域或启用 CORS 来解决。

我们需要在本地提供此文件。我们可以将它作为临时措施放在 rMaps 包中的小册子文件夹中。创建地图时，此文件夹会被复制到临时文件中：

require(rMaps)
map1 = Leaflet$new()
map1$setView(c(45.5236, -122.675), 13)
map1$tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
map1$addKML('leaflet/placemark.kml')
# temp copy http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml
# to rMaps
sampleKml <- readLines('http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml')
write(sampleKml, file.path(leafletLib, 'placemark.kml'))

# finally try the map
map1

# remove the temp file 
file.remove(file.path(leafletLib, 'placemark.kml'))

更新： 在rCharts 中有一个addAssets 方法，它允许您添加.js 文件。这使我们可以简化事情，不需要我们编写 js 文件的副本，也不需要编辑 config.yml 文件。

require(rMaps)
map1 = Leaflet$new()
map1$setView(c(45.5236, -122.675), 13)
map1$tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png")
map1$addAssets(css = NULL, jshead = 'http://harrywood.co.uk/maps/examples/leaflet/leaflet-plugins/layer/vector/KML.js')
map1$addKML('leaflet/placemark.kml')
leafletLib <- file.path(find.package("rMaps"), "libraries", "leaflet")
sampleKml <- readLines('http://kml-samples.googlecode.com/svn/trunk/kml/Placemark/placemark.kml')
write(sampleKml, file.path(leafletLib, 'placemark.kml'))
# finally try the map
map1

# remove the temp file 
file.remove(file.path(leafletLib, 'placemark.kml'))