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

Question

我在

R-Shiny

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

因为这个初始版本不需要更改 HTML 本身，所以我尝试按照示例here在我的页面中包含原始 HTML，但我收到了 404 错误，以及当我尝试将其包含为

R-Shiny

内的 iframe（以下此讨论）。然后，我为 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 行也导致了空白地图。

实际上，我在托管派生标题图层时遇到了一些可能类似的问题，这些问题仍然未解决，这是我选择在该应用程序的演示版本中使用 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 包中的 leaflet 文件夹中。创建地图后，此文件夹将被复制到临时文件中：

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'))

更新：

addAssets

中有一个

rCharts

方法可以让你添加

.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'))