代码之家 › 专栏 › 技术社区 › nate

单张在R。试图添加tracksymbol插件到地图。包括示例数据

htmlwidgets leaflet plugins r

nate · 技术社区 · 6 年前

我正在尝试添加传单tracksymbol插件, https://github.com/lethexa/leaflet-tracksymbol ,到目前为止我已经试过了:

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代码等方面。我花了一天的时间试图呈现这个问题,尽可能多地阅读堆栈溢出,但只是没有主意。我希望能帮上忙。能够在地图上看到一艘船前进的方向,将使地图上的信息更加丰富。

我很感激你的帮助。提前谢谢你。-奈特

1 回复 | 直到 6 年前

Stedy 6 年前

我花了很多时间在这上面,很可能收到了很多和你一样的错误。过了一段时间,我开始怀疑我是否有一个范围界定问题(例如,我一直得到一个错误 L.latLng not found )或者其他一些关于 htmlwidgets 还有传单 trackSymbols 是的。我最终放弃了 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>

产生: