R Leaflet情节船方向

Question

我有关于船只/船舶位置及其转向路线的信息。我想将它们绘制在带有自定义图标的传单地图上，该图标看起来像一艘船。我发现"tags"中的glyphicons图标最合适。以下是一些数据：

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为我不想要的图标添加了背景标记。我已经看过this以及this，后者正是我想要做的。如何在没有标记背景的情况下按照转向的路线显示自定义船舶图标的任务？

Answer 1

概述

为了绘制图标方向，我遵循了三个步骤：

1. 要在传单地图上呈现HTML图标，我将leaflet::makeAwesomeIcon()换成了leaflet::makeIcon()。

2. 要启用图标旋转，我存储了a leaflet.rotatedMarker.js file和registered this plugin as a leaflet object的本地副本。

3. 最后，要指定图标应旋转多少度，我将cog变量放在rotationAngle markerOptions() boat.icon内# 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 # 内。

注意：步骤2和3取自对SO问题leaflet::addMarkers()的答案和评论。所有功劳都归功于@rrs和@Ufos。

在做任何事情之前，我运行了你的代码并获得了以下传单地图：

icon rotation in leaflet package

使用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 ，图标被旋转但更难阅读：



最终，我决定使用亮橙色和北箭头图标来显示位置和旋转角度：

leaflet::addCircleMarkers()

代码

android

会话信息

php