R 中的传单。尝试将 tracksymbol 插件添加到地图。包含示例数据

Question

我正在尝试将 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

Answer 1

我花了很多时间处理这个问题，很可能收到了很多与您相同的错误。一段时间后，我开始怀疑我是否遇到了范围界定问题（例如，我一直收到错误 L.latLng not found）或 htmlwidgets 和传单 [=13] 之间的交互方面的其他问题=].我最终完全放弃了 htmlwidgets 并选择了纯 JS 解决方案：

首先，将tmp写成自己的csv： write.csv(tmp, "boats.csv", row.names=F)

然后我用了jquery-csv:

我的index.html

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
        <script src="https://rawgit.com/lethexa/leaflet-tracksymbol/master/leaflet-tracksymbol.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
<script src="https://rawgit.com/evanplaice/jquery-csv/master/src/jquery.csv.js"></script>

</head>
<body>

<div id="map" style="width: 600px; height: 400px;"></div>

<script>
var map = L.map('map').setView([25.93, 51.61], 6);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


$.ajax({
  type: "GET",
  url: "boats.csv",
  dataType: "text",
  success: function(data) {
  dat2 = $.csv.toObjects(data);
  for (var i = 0; i < dat2.length; i++){
    var latlng = L.latLng(dat2[i].latitude, dat2[i].longitude)
      L.trackSymbol(latlng, {
        speed: dat2[i].speed,
        course: dat2[i].course,
        heading: dat2[i].heading,
        fillColor: dat2[i].fillColor
      }).addTo(map);
  }
  }
});

</script>
</body>

</html>

产生：

R 中的传单。尝试将 tracksymbol 插件添加到地图。包含示例数据

Leaflet in R. Trying to add tracksymbol plugin to map. Example data included

plugins

r

leaflet

htmlwidgets