Вращение иконки в листовке

Question

Я учусь программировать на 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

Однако это не работает.

Answer 1

Это единственный способ заставить его работать. Вы хотите использовать плагин RotatedMarker, доступный здесь. Чтобы использовать этот плагин с R, я следовал инструкциям здесь.

Две вещи, о которых нужно знать, я не могу понять:

1. Я не могу найти значок, когда он хранится локально - он должен быть доступен через URL. Если вы можете это исправить, пожалуйста, дайте мне знать.

2. Вам необходимо скачать файл 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 градусов.

Answer 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. Я потратил много времени на поиски того, почему мое изображение не показывалось, и, наконец, это было только потому, что мой сценарий был не в том месте.