我正在尝试将Leaflet-tracksymbol插件https://github.com/lethexa/leaflet-tracksymbol添加到我在R内制作的地图中。到目前为止,我已经尝试过了:
library(htmltools)
library(htmlwidgets)
library(leaflet)
library(leaflet.extras)
library(magrittr)
tmp<- data.frame(mmsi=c(1234567, 9876554), speed=c(3.5, 5.4),
course=c(270.2, 155.4), rot=c(0,0.4), heading=c(267, 230),
latitude=c(25.92855, 25.18627), longitude=c(51.61341, 56.58021),
trackId=c(123,456), fill=c(TRUE, TRUE), fillColor=c("#0000ff",
"#228B22"), fillOpacity=c(1.0,1.0), stroke=c(TRUE, TRUE),
color=c("#000000", "#000000"), opacity=c(1.0,1.0), weight=c(1.0,1.0))
trackMarkerPlugin <- htmltools::htmlDependency("leaflet.tracksymbol",
"1.0.8", src = c(href = "https://rawgit.com/lethexa/leaflet-
tracksymbol/master/leaflet-tracksymbol.min.js"))
registerPlugin <- function(map, plugin) {
map$dependencies <- c(map$dependencies, list(plugin))
map
}
trackMarkerMap<- leaflet::leaflet(data=tmp[c(1),]) %>%
addProviderTiles(providers$CartoDB.Positron, group ="CartoDB.Positron", options = providerTileOptions(detectRetina = T)) %>%
fitBounds(~(min(longitude)-.07), ~(min(latitude)-.07), ~(max(longitude)+.07), ~(max(latitude)+.07)) %>%
registerPlugin(trackMarkerPlugin) %>%
htmlwidgets:: onRender("function(el, x, data) {
data = HTMLWidgets.dataframeToD3(data);
data = data.map(function(val) { return [val.mmsi, val.speed, val.course, val.rot, val.heading, val.latitude, val.longitude, val.trackId, val.fill, val.fillColor, val.fillOpacity, val.stroke, val.color, val.opacity, val.weight]; });
var latlng = L.latlng(latitude, longitude);
var speed = speed;
var course = course;
var heading = heading;
L.trackSymbol(latlng, {
trackId: trackId,
fill: fill,
fillColor: fillColor,
fillOpacity: fillOpacity,
stroke: stroke,
color: color,
opacity: opacity,
weight: weight,
speed: speed,
course: course,
heading: heading
}).addTo(this); }", data = tmp[c(1),] %>% dplyr::select(mmsi, speed, course, rot, heading, latitude, longitude, trackId, fill, fillColor, fillOpacity, stroke, color, opacity, weight))
trackMarkerMap
但是,即使我仅将第一个观察结果传递给onRender
函数,我也无法在地图上看到任何标记。我想知道我在做什么错?我不确定问题是否出在我的依赖项采购,实际的HTML代码等上。我花了整整一天的时间试图使其呈现,在堆栈溢出时尽可能多地阅读,但是完全没有想法。我希望对此有所帮助。能够看到船舶在地图上的行驶方向将使其信息量大得多。
我非常感谢您的帮助。先感谢您。 -nate
答案 0 :(得分:0)
我花了很多时间来解决这个问题,并且可能收到许多与您相同的错误。过了一会儿,我开始怀疑是否存在范围问题(例如,我不断收到错误L.latLng not found
)或其他问题,例如htmlwidgets
与传单{{1 }}。我最终只是完全放弃了trackSymbols
并选择了一个纯JS解决方案:
首先,将htmlwidgets
写为自己的csv:
tmp
然后我使用了jquery-csv:
我的index.html
write.csv(tmp, "boats.csv", row.names=F)
哪个会产生: