【问题标题】:R Leaflet plot ship directionR传单情节船方向
【发布时间】:2018-05-21 16:12:56
【问题描述】:

我有关于船只/船只的位置以及它们正在驾驶的航线的信息。我想将它们绘制在带有自定义图标的传单地图上,该图标看起来像一艘船。我发现glyphicons 中的"tags" 图标最合适。以下是一些可供使用的数据:

dput(head(x))
structure(list(boatName = c("Conti Benguela", "Sunny Bay", "Sunny Horizon", 
"FMT URLA", "Qi Xiang 22", "STI Solidarity"), lat = c(37.115365, 
38.4772017, 14.632, 56.80515, 51.31172, -2.2783283), lon = c(15.2682183, 
-8.7888783, -79.5806667, 7.601885, -143.5678933, 46.6328383), 
    cog = c("16", "331", "182", "21", "288", "72")), row.names = c(NA, 
6L), class = "data.frame")

cog 表示地面上的路线,图标转换为旋转角度。我正在使用以下代码来绘制当前船舶的位置和根据船舶转向的方向的旋转:

shipIcon <- makeAwesomeIcon("tag",iconRotate = x$cog)
leaflet() %>% addTiles() %>% 
  addAwesomeMarkers(lng=x$lon,lat=x$lat,icon=shipIcon,popup = x$boatName)

但是,如您所见,makeAwesomeIcon 为我不想要的图标添加了背景标记。我看过thisthis,后者正是我想要做的。如何在没有标记背景的情况下根据它正在转向的路线显示带有旋转的自定义船图标的任务?

【问题讨论】:

  • 您可能希望使用 HTML 图标来代替依赖 makeAwesomeIcon()。请参阅此处的示例:stackoverflow.com/questions/37862467/…
  • @aspiringurbandatascientist 感谢您的评论,但并没有真正解决我的问题。我正在查看图标的旋转,这可以通过makeAwesomeIcon() 进行,但不想要标记背景。 icons() 函数没有旋转参数。

标签: r leaflet htmlwidgets htmltools


【解决方案1】:

概述

为了绘制图标方向,我遵循了三个步骤:

  1. 为了在传单地图上呈现 HTML 图标,我将 leaflet::makeAwesomeIcon() 替换为 leaflet::makeIcon()

  2. 为了启用图标旋转,我存储了a leaflet.rotatedMarker.js fileregistered this plugin as a leaflet object 的本地副本。

  3. 1234563 >

注意:第 2 步和第 3 步取自 SO 问题 icon rotation in leaflet package 的答案和评论。所有功劳归于@rrs 和@Ufos。

在做任何事情之前,我运行了您的代码并得到了以下传单地图:

使用boat.icon,图标被旋转但更难阅读:

最终,我决定使用亮橙色leaflet::addCircleMarkers() 和指北针图标来显示位置和旋转角度:

代码

# load necessary packages
library( htmltools )
library( htmlwidgets )
library( leaflet )

# this is taken from: https://gist.github.com/jcheng5/c084a59717f18e947a17955007dc5f92
# "Leaflet.rotatedMarker" is taken from https://raw.githubusercontent.com/bbecquet/Leaflet.RotatedMarker/master/leaflet.rotatedMarker.js
rotatedMarker <- 
  htmlDependency( name = "Leaflet.rotatedMarker" # note: this .js file has to be copied and stored in your current working directory 
                  , version = "0.1.2"
                  , src = normalizePath( path = getwd() )
                  , 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
}

# store data
df <-
  structure(list(boatName = c("Conti Benguela", "Sunny Bay", "Sunny Horizon", 
                              "FMT URLA", "Qi Xiang 22", "STI Solidarity"), lat = c(37.115365, 
                                                                                    38.4772017, 14.632, 56.80515, 51.31172, -2.2783283), lon = c(15.2682183, 
                                                                                                                                                 -8.7888783, -79.5806667, 7.601885, -143.5678933, 46.6328383), 
                 cog = c("16", "331", "182", "21", "288", "72")), row.names = c(NA, 
                                                                                6L), class = "data.frame")

# store boat png
boat.file <- "http://cdn.onlinewebfonts.com/svg/download_498189.png"

# store north arrow png
north.arrow.file <- "https://upload.wikimedia.org/wikipedia/commons/a/aa/Aiga_uparrow.svg"

# make boat icon
boat.icon <- 
  makeIcon( iconUrl = boat.file
            , iconWidth = 25
            , iconHeight = 25 )

# make north arrow icon
north.arrow.icon <-
  makeIcon( iconUrl = north.arrow.file
            , iconWidth = 10
            , iconHeight = 10 )

# display leaflet map
leaflet( data = df ) %>%
  addProviderTiles( provider = "OpenStreetMap.BlackAndWhite" ) %>%
  registerPlugin( plugin = rotatedMarker ) %>%
  addCircleMarkers( lng = ~lon
                    , lat = ~lat
                    , radius = 5
                    , fillColor = "orange"
                    , fillOpacity = 1
                    , stroke = FALSE ) %>%
  addMarkers( lng = ~lon
              , lat = ~lat
              , label = ~boatName
              , icon = north.arrow.icon
              , options = markerOptions( rotationAngle = ~cog ) )

# end of script #

会话信息

R version 3.4.4 (2018-03-15)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS High Sierra 10.13.2

Matrix products: default
BLAS: /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.4/Resources/lib/libRlapack.dylib

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods  
[7] base     

other attached packages:
[1] leaflet_1.1.0.9000 htmlwidgets_1.0    htmltools_0.3.6   

loaded via a namespace (and not attached):
 [1] shiny_1.0.5     compiler_3.4.4  magrittr_1.5   
 [4] R6_2.2.2        markdown_0.8    tools_3.4.4    
 [7] yaml_2.1.18     Rcpp_0.12.16    crosstalk_1.0.0
[10] jsonlite_1.5    digest_0.6.15   xtable_1.8-2   
[13] httpuv_1.3.6.2  mime_0.5 

【讨论】:

  • 非常感谢您的详细回答。彻底解决了我的问题。我正在为现在看起来相当不错的船只使用自定义图标。分享图片。
  • @Dhiraj 那些船图标看起来棒极了——读者可以看到密度和旋转!感谢您分享图片并发布一个很好的问题。
  • 感谢您的回答。如果您希望图标从图标图像的中心旋转,请将 .js 文件的这一行 this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center bottom' ; 更改为 this.options.rotationOrigin = this.options.rotationOrigin || iconAnchor || 'center center' ;
猜你喜欢
  • 1970-01-01
  • 2015-11-03
  • 1970-01-01
  • 1970-01-01
  • 2016-11-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多