努力将反应数据值从plotly_hover链接到传单地图,而无需重新加载传单

时间:2019-06-19 02:47:06

标签: r react-leaflet shinyapps

我想使用时间序列图中的plotly_hover值,并在与plotly_hover相同的时间戳上显示传单地图上的GPS位置。

我找到了一种方法,但是每次悬停更改位置时,传单地图都会重新加载。我现在正在尝试以下代码。在这里,我停留在event.data上,观察时将时间序列图和传单图链接起来,以便在悬停在地图上时同时显示地图上的位置(纬度和经度)和时间序列图中的速度值剧情。

我只是出于实际目的减少了数据帧,但是错误是相同的。警告:UseMethod中的错误:“ metaData”的适用方法不适用于“字符”类的对象

DateTime <- c("2019-06-18 02:45:00", "2019-06-18 02:30:00", 
          "2019-06-18 02:15:00", "2019-06-18 02:00:00", 
          "2019-06-18 01:45:00", "2019-06-18 01:30:00", 
          "2019-06-18 02:45:00", "2019-06-18 02:30:00",
          "2019-06-18 02:15:00", "2019-06-18 02:00:00",
          "2019-06-18 01:45:00", "2019-06-18 01:30:00")

ShipName <- c("ShipA", "ShipA", "ShipA", "ShipA", "ShipA", "ShipA", 
              "ShipB", "ShipB", "ShipB", "ShipB", "ShipB", "ShipB")

Latitude <- c(24.97308, 25.01779, 25.06509, 25.11231, 25.16046, 25.21110, 
              23.63477, 23.66860, 23.70218, 23.73552, 23.76868, 23.80180)

Longitude <- c(36.02598, 35.98830, 35.95460, 35.92248, 35.89232, 
               35.86438, 59.11677, 59.07402, 59.03015, 58.98605, 
               58.94183, 58.89752)

GPSSpeed <- c(13.6, 13.4, 13.4, 13.4, 13.4, 13.5, 12.5, 12.6, 12.5, 12.5, 
              12.7, 12.7)

DF <- data.frame(DateTime, ShipName, Latitude, Longitude, GPSSpeed)
DF$DateTime <- as.POSIXct(DF$DateTime)


ui <- bootstrapPage(

  fluidRow(
    column(4,selectInput(inputId = "shipname",
                   label = "ShipName",
                   choices = c("ShipA", "ShipB"),
                   selected = NULL,
                   multiple = FALSE)),
   column(4,dateRangeInput(inputId = "daterange",
                      label = "Date Range:",
                      format = "yyyy-mm-dd",
                      start = as.Date("2019-06-17"),
                      end = as.Date("2019-06-19"))),
   column(4,selectInput(inputId = 'Feature1',
                   label = 'T1 Option 1 for left y-axis:',
                   choices = c("Blank",c(colnames(bw[,-c(1:2)]))),
                   selected="GPSSpeed"))),


    plotlyOutput(outputId = 'timeseries1', height = 300),


    leafletOutput(outputId = "mymap", height = 300)

 )




server <- function(input, output){

 # Create an empty column to have the plot empty
 DF$Blank <- NA

 # Plot time series chart 1 
 output$timeseries1 <- renderPlotly({

    Filtered_DF <- DF %>% filter(ShipName == input$shipname) %>% 
    filter(DateTime >= input$daterange[1]  & DateTime <= 
    input$daterange[2])


     p <- plot_ly(Filtered_DF, x = ~DateTime, key = ~DateTime, source = 
                  "latPos") %>%
     #add_lines(y = ~get(input$Feature1), 
     #          name = paste(as.character(input$Feature1))) %>%
     add_trace(y = ~get(input$Feature1), 
               name = paste(as.character(input$Feature1)), 
               type = 'scatter', 
               mode = 'lines')  %>%
     layout(legend = list(nrow = 2,
                          orientation = "h",
                          x = 0, y = -0.25),
                          hovermode = 'x',
                          xaxis = list(title = "DateTime"),
                          autosize = TRUE) %>%
     config(displayModeBar = TRUE)
     p
   })


filteredData <- reactive({

DF %>% filter(ShipName == input$shipname) %>% 
 filter(DateTime >= input$daterange[1] & DateTime <= input$daterange[2])

 event.data <- event_data(event = "plotly_hover", source = "latPos")
  if (is.null(event.data)) {
    print("Hover to see the lat posistion of the point filterdata")
  } else { 
    Filtered_DF %>% filter(DateTime == event.data$key)
  }
})


 output$mymap <- renderLeaflet({

  Filtered_DF <- DF %>% 
  filter(ShipName == input$shipname) %>% 
  filter(DateTime >= input$daterange[1] & DateTime <= input$daterange[2])

  leaflet(Filtered_DF) %>%
    setView(lng = 0, lat = 0, zoom = 2)  %>% 
    addTiles() %>%
    addPolylines(lat = ~Latitude, lng = ~Longitude, color = "blue", 
                 weight = 1)
 })


 observe({
  leafletProxy("mymap", data = filteredData()) %>%
  addCircles(lat = ~Latitude, lng = ~Longitude, weight = 3)
  })

}

shinyApp(ui=ui, server=server)

0 个答案:

没有答案