传单包中的图标旋转答案

【问题标题】：icon rotation in leaflet package传单包中的图标旋转
【发布时间】：2015-12-01 12:06:44
【问题描述】：

我正在学习使用小册子包在 R 中编程。我想给图标一个角度，并尝试使用以下代码：

m <- leaflet()
m <- addTiles(m,urlTemplate = "http://xdworld.vworld.kr:8080/2d/Base/201310/{z}/{x}/{y}.png")
m = m %>% setView(127.074167,34.456806, zoom = 9)
arrowIcon <- makeIcon(
  iconUrl = "arrow.png" 
  ,iconWidth = 100, iconHeight = 100 
  ,iconAnchorX = 25, iconAnchorY =25
)
arrowIcon <- makeIcon(
  iconUrl = "ARROW_B2.png" 
  ,iconWidth = 100, iconHeight = 100 
  ,iconAnchorX = 25, iconAnchorY = 25
)
offset = 0.00 # zoom 10-> 0.03, 9->0.06, 8 -> 0.12, 7 -> 0.24
m_lat = 34.45 + offset
m_lon = 127.07 - offset
m <- addMarkers(m,  lng=m_lon, lat= m_lat
            , options = c( markerOptions(), iconAngle= 0)
            ,icon= arrowIcon)
m <- addCircles(m, lng=127.07, lat=34.45 , weight = 10,radius = 100)
m

但是，它不起作用。

【问题讨论】：

嗨，Seo 没有必要在那里添加不必要的粗体。而且也没有必要在代码块的底部放一行“=”。
谢谢 NSNoob。我太不够了，因为我是第一个。 :)

标签： r rotation icons leaflet angle

【解决方案1】：

这是我让它工作的唯一方法。您想使用 RotatedMarker 插件，可用here。要将此插件与 R 一起使用，我按照说明 here.

需要注意的两件事我似乎无法弄清楚：

当图标存储在本地时，我似乎无法找到它 - 它需要通过 URL 访问。如果你能解决这个问题，请告诉我。
您需要下载 javascript 文件并将其保存在本地。在下面的示例中，我将它放在与我的 R 脚本相同的目录中。从理论上讲，您应该能够通过 URL 加载它，但这不起作用。如果你能解决这个问题，请告诉我。

下面是工作代码：

library(htmltools)
library(htmlwidgets)
library(leaflet)

# this is taken from: https://gist.github.com/jcheng5/c084a59717f18e947a17955007dc5f92
rotatedMarker <- htmlDependency(
  "Leaflet.rotatedMarker",
  "0.1.2",
  src = normalizePath("."),
  script = "leaflet.rotatedMarker.js"
)

# this is taken from: https://gist.github.com/jcheng5/c084a59717f18e947a17955007dc5f92
registerPlugin <- function(map, plugin) {
  map$dependencies <- c(map$dependencies, list(plugin))
  map
}

leaflet() %>%
  addTiles(urlTemplate = "http://xdworld.vworld.kr:8080/2d/Base/201310/{z}/{x}/{y}.png") %>%
  setView(127.074167,34.456806, zoom = 9) %>%
  registerPlugin(rotatedMarker) %>%
  onRender("function(el, x) {
    var planeIcon = L.icon({iconUrl: 'https://raw.githubusercontent.com/bbecquet/Leaflet.PolylineDecorator/master/example/icon_plane.png', iconAnchor: [16, 16]});
    var pathPattern = L.marker([34.45, 127.07], {icon: planeIcon, rotationAngle: 90}).addTo(this);
  }") %>%
  addCircles(lng = 127.07, lat = 34.45, weight = 10, radius = 100)

产生：

请注意，我已将平面图标旋转了 90 度。

【讨论】：

是否可以将此解决方案扩展为更多图标，每个图标都有不同的旋转？
比onRender 解决方法更简单的方法是先使用planeIcon = makeIcon(...)，然后在addMarkers). The rotation can be then added using options = markerOptions(rotationAngle = c(90)) 中设置icon = planeIcon `。其余部分相同。
@Enrique 如果您按照我上面描述的方式进行操作，则应该可以使用%>% 进行循环，但没有矢量化的方式。问题是，标记是静态的，旋转是它们的属性。所以，同一个标记不同的角度实际上是两个不同的标记。虽然，我认为原始包leaflet.rotatedMarker.js 可以扩展。如果您真的需要大规模使用各种旋转，这可能是您最好的选择。
@rrs 我正在尝试做类似的事情，但对我来说，旋转是一个角度值，作为变量存储在数据框中。我该如何使用它？ stackoverflow.com/questions/50452750/…

【解决方案2】：

对于您的第一点，我发现如果图像存储在名为 www 的目录中，您可以加载图像。

|
|- app.R
|- www
    |- icon_plane.pg

然后你就可以用这段代码来加载它了

onRender("function(el, x) {
          var planeIcon = L.icon({iconUrl: 'icon_plane.png', iconAnchor:[16, 16]});
          var pathPattern = L.marker([34.45, 127.07], {icon: planeIcon, rotationAngle: 90}).addTo(this);
          }")

注意正确加载您的 js 文件。我花了很多时间寻找为什么我的图像没有显示，最后只是因为我的脚本没有放在正确的位置。

【讨论】：