为R中的leaflet添加标签到使用leaftime插件创建的时间线地图

Question

下面的示例代码取自R leaftime包的文档中给出的示例。它创建了一张带有时间线的地图，显示了随着时间的推移出现的点。我希望标签被添加到点，以显示每个点的id号。通过查看代码，我假设代码中的JS函数实际上是将JavaScript传递给leaflet以定制地图。我从这里了解到https://gis.stackexchange.com/questions/245621/how-to-label-geojson-points-in-leaflet，我需要添加工具提示函数，但是一直无法修改下面的R代码来达到预期的结果。如果有任何帮助我将不胜感激。

library(leaflet)
library(leaftime)
library(htmltools)

#Build data.frame
power <- data.frame(
"Latitude" = c(
  33.515556, 38.060556, 47.903056, 49.71, 49.041667, 31.934167,
  54.140586, 54.140586, 48.494444, 48.494444
),
"Longitude" = c(
  129.837222, -77.789444, 7.563056, 8.415278, 9.175, -82.343889,
  13.664422, 13.664422, 17.681944, 17.681944
),
"start" = seq.Date(as.Date("2015-01-01"), by = "day", length.out = 10),
"end" = as.Date("2015-01-10")
)
power$id<-seq.int(nrow(power))

# use geojsonio to convert data.frame
power_geo <- geojsonio::geojson_json(power,lat="Latitude",lon="Longitude")

leaflet(power_geo) %>%
addTiles() %>%
setView(44.0665,23.74667,2) %>%
addTimeline(
  timelineOpts = timelineOptions(
    pointToLayer = htmlwidgets::JS(
      "
      function(data, latlng) {
      return L.circleMarker(latlng, {
      radius: 10,
      color: 'black',
      fillColor: 'pink',
      fillOpacity: 1
      })
      }
      "
    )
    )
  )

Answer 1

扩展来自Falke Design的答案，这里是将id添加到标签的完整代码。

library(leaflet)
library(leaftime)
library(htmltools)

#Build data.frame
power <- data.frame(
"Latitude" = c(
  33.515556, 38.060556, 47.903056, 49.71, 49.041667, 31.934167,
  54.140586, 54.140586, 48.494444, 48.494444
),
"Longitude" = c(
  129.837222, -77.789444, 7.563056, 8.415278, 9.175, -82.343889,
  13.664422, 13.664422, 17.681944, 17.681944
),
"start" = seq.Date(as.Date("2015-01-01"), by = "day", length.out = 10),
"end" = as.Date("2015-01-10")
)
power$id<-seq.int(nrow(power))

# use geojsonio to convert data.frame
power_geo <- geojsonio::geojson_json(power,lat="Latitude",lon="Longitude")

leaflet(power_geo) %>%
  addTiles() %>%
  setView(44.0665,23.74667,2) %>%
  addTimeline(
    timelineOpts = timelineOptions(
      pointToLayer = htmlwidgets::JS(
        "
        function(data, latlng) {
          return L.circleMarker(latlng, {
            radius: 10,
            color: 'black',
            fillColor: 'pink',
            fillOpacity: 1
          }).bindTooltip(
            // data.properties will have the columns from sf in R
            'id: ' + data.properties.id + '<br/>start: ' + data.properties.start,
            {permanent: true}
          ).openTooltip()
        }
        "
      )
    )
  )

Answer 2

尝试：

pointToLayer = htmlwidgets::JS(
      "
      function(data, latlng) {
      return L.circleMarker(latlng, {
      radius: 10,
      color: 'black',
      fillColor: 'pink',
      fillOpacity: 1
      }).bindTooltip('I am a circle.',{permanent: true}).openTooltip();
      }
      "
    )

下面是一个使用普通JS的示例：https://jsfiddle.net/falkedesign/yqfs1bnk/