- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当选择(单击)数据表中的相应记录时,是否可以突出显示传单 map 上的标记或多段线?
我查看了这些问题/线程:
selecting a marker on leaflet, from a DT row click and vice versa - 没有答案
https://github.com/r-spatial/mapedit/issues/56 - 检查timeportfolio于2017年7月23日的评论。正如gif所示,我希望能够在数据表中选择一行,以便相应的 map 对象(标记/折线)也突出显示(无需编辑 map ) )。
这是一个工作示例,其中在下面的数据表中选择突出显示的 map 对象,但反之则不然 - 这就是我想要实现的目标。
##############################################################################
# Libraries
##############################################################################
library(shiny)
library(shinythemes)
library(ggplot2)
library(plotly)
library(leaflet)
library(DT)
##############################################################################
# Data
##############################################################################
qDat <- quakes
qDat$id <- seq.int(nrow(qDat))
str(qDat)
##############################################################################
# UI Side
##############################################################################
ui <- fluidPage(
titlePanel("Visualization of Fiji Earthquake"),
# side panel
sidebarPanel(
h3('Fiji Earthquake Data'),
sliderInput(
inputId = "sld01_Mag",
label="Show earthquakes of magnitude:",
min=min(qDat$mag), max=max(qDat$mag),
value=c(min(qDat$mag),max(qDat$mag)), step=0.1
),
plotlyOutput('hist01')
),
# main panel
mainPanel(
leafletOutput('map01'),
dataTableOutput('table01')
)
)
##############################################################################
# Server Side
##############################################################################
server <- function(input,output){
qSub <- reactive({
subset <- subset(qDat, qDat$mag>=input$sld01_Mag[1] &
qDat$mag<=input$sld01_Mag[2])
})
# histogram
output$hist01 <- renderPlotly({
ggplot(data=qSub(), aes(x=stations)) +
geom_histogram(binwidth=5) +
xlab('Number of Reporting Stations') +
ylab('Count') +
xlim(min(qDat$stations), max(qDat$stations))+
ggtitle('Fiji Earthquake')
})
# table
output$table01 <- renderDataTable({
DT::datatable(qSub(), selection = "single",options=list(stateSave = TRUE))
})
# map
output$map01 <- renderLeaflet({
pal <- colorNumeric("YlOrRd", domain=c(min(quakes$mag), max(quakes$mag)))
qMap <- leaflet(data = qSub()) %>%
addTiles() %>%
addMarkers(popup=~as.character(mag), layerId = qSub()$id) %>%
addLegend("bottomright", pal = pal, values = ~mag,
title = "Earthquake Magnitude",
opacity = 1)
qMap
})
observeEvent(input$map01_marker_click, {
clickId <- input$map01_marker_click$id
dataTableProxy("table01") %>%
selectRows(which(qSub()$id == clickId)) %>%
selectPage(which(input$table01_rows_all == clickId) %/% input$table01_state$length + 1)
})
}
##############################################################################
shinyApp(ui = ui, server = server)
##############################################################################
有什么建议吗?
最佳答案
是的,这是可能的。您可以使用 input$x_rows_selected
从 datatable
获取所选行,其中 x
是 datatable
名称。然后,我们可以使用 leafletProxy 删除旧标记并添加新标记。我还创建了一个 reactiveVal
来跟踪先前标记的行,并在单击新元素时重置该元素的标记。如果您还想将之前选择的标记保持为红色,只需删除 reactiveVal
prev_row()
并删除 observeEvent
的第二部分。是一个工作示例。
请注意,出于说明目的,我在 qSub()
响应式(Reactive)中添加了 head(25)
来限制行数。
希望这有帮助!
<小时/> <小时/> ##############################################################################
# Libraries
##############################################################################
library(shiny)
library(shinythemes)
library(ggplot2)
library(plotly)
library(leaflet)
library(DT)
##############################################################################
# Data
##############################################################################
qDat <- quakes
qDat$id <- seq.int(nrow(qDat))
str(qDat)
##############################################################################
# UI Side
##############################################################################
ui <- fluidPage(
titlePanel("Visualization of Fiji Earthquake"),
# side panel
sidebarPanel(
h3('Fiji Earthquake Data'),
sliderInput(
inputId = "sld01_Mag",
label="Show earthquakes of magnitude:",
min=min(qDat$mag), max=max(qDat$mag),
value=c(min(qDat$mag),max(qDat$mag)), step=0.1
),
plotlyOutput('hist01')
),
# main panel
mainPanel(
leafletOutput('map01'),
dataTableOutput('table01')
)
)
##############################################################################
# Server Side
##############################################################################
server <- function(input,output){
qSub <- reactive({
subset <- subset(qDat, qDat$mag>=input$sld01_Mag[1] &
qDat$mag<=input$sld01_Mag[2]) %>% head(25)
})
# histogram
output$hist01 <- renderPlotly({
ggplot(data=qSub(), aes(x=stations)) +
geom_histogram(binwidth=5) +
xlab('Number of Reporting Stations') +
ylab('Count') +
xlim(min(qDat$stations), max(qDat$stations))+
ggtitle('Fiji Earthquake')
})
# table
output$table01 <- renderDataTable({
DT::datatable(qSub(), selection = "single",options=list(stateSave = TRUE))
})
# to keep track of previously selected row
prev_row <- reactiveVal()
# new icon style
my_icon = makeAwesomeIcon(icon = 'flag', markerColor = 'red', iconColor = 'white')
observeEvent(input$table01_rows_selected, {
row_selected = qSub()[input$table01_rows_selected,]
proxy <- leafletProxy('map01')
print(row_selected)
proxy %>%
addAwesomeMarkers(popup=as.character(row_selected$mag),
layerId = as.character(row_selected$id),
lng=row_selected$long,
lat=row_selected$lat,
icon = my_icon)
# Reset previously selected marker
if(!is.null(prev_row()))
{
proxy %>%
addMarkers(popup=as.character(prev_row()$mag),
layerId = as.character(prev_row()$id),
lng=prev_row()$long,
lat=prev_row()$lat)
}
# set new value to reactiveVal
prev_row(row_selected)
})
# map
output$map01 <- renderLeaflet({
pal <- colorNumeric("YlOrRd", domain=c(min(quakes$mag), max(quakes$mag)))
qMap <- leaflet(data = qSub()) %>%
addTiles() %>%
addMarkers(popup=~as.character(mag), layerId = as.character(qSub()$id)) %>%
addLegend("bottomright", pal = pal, values = ~mag,
title = "Earthquake Magnitude",
opacity = 1)
qMap
})
observeEvent(input$map01_marker_click, {
clickId <- input$map01_marker_click$id
dataTableProxy("table01") %>%
selectRows(which(qSub()$id == clickId)) %>%
selectPage(which(input$table01_rows_all == clickId) %/% input$table01_state$length + 1)
})
}
##############################################################################
shinyApp(ui = ui, server = server)
##############################################################################
关于r - Shiny - 在数据表中选择记录时如何突出显示传单 map 上的对象?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48781380/
我试图找到在庞大的代码库中创建 NaN 的位置。是否有一些编译器标志或我可以用来在 NaN 上 panic 的东西,这样我就可以找到它在哪一行? 最佳答案 没有编译器标志。你能做的最好的事情就是把你的
A类 class ClassA { @Autowired class ClassB; } 类配置: @Configuration class TestConfi
我是一名统计学研究生,经常使用 R。我熟悉其他编程环境中的 OOP。我什至在各种定义用于存储数据的新类的统计包中看到了它的使用。 在我研究生生涯的这个阶段,我通常会为一些类作业编写一些算法——一些接收
我想要两个不同的网络摄像头视频输出,一个是普通的网络摄像头镜头,另一个是它的“镜像”版本。 cv2可以吗? import time, cv2 video=cv2.VideoCapture(0) a=0
我创建了一个可以通过两种方式过滤的图库。一个通过单击按钮,另一个通过搜索过滤器。过滤器工作完美,除了当 div 隐藏在过滤器上时,其余显示的 div 不会彼此相邻 float 。 这是过滤前的样子:
我们作为一个 4 人团队工作,我们的项目部署在 openshift我们使用 git 存储库 进行提交、推送和 pull 。当有人提交更多更改时,其他人必须 pull 它以在我们的系统中进行更新。但是从
我正在尝试扩展自动完成功能,以便在选择某个项目时显示辅助标签。例如,给定显示项目的自动完成功能,项目名称将显示在包含代码的输入框旁边的 span 标记中。 查看自动完成源代码,我发现过滤值的下拉列表是
我有一个包含歌曲、艺术家和专辑实体的核心数据。 歌曲有可选的一对一关系艺术家到艺术家实体和专辑到专辑实体这两个实体都与 Song 实体具有反向关系。 相册有可选的一对一关系艺术家到艺术家实体和可选的一
XmlSerializer正在调用 IList.Add()在我的课上,我不明白为什么。 我有一个自定义类(层次结构中的几个类之一),其中包含我使用 XmlSerializer 与 XML 相互转换的数
我们在 Web 应用程序中定义了此事件,它创建了一个名为 timelineEventClicked 的自定义触发器 canvas.addEventListener('click', function
有大量资源可用于使用 Swift(可达性)检查有效的 Internet 连接,以及在进行 API 调用时检查 httpResponse 的 statusCode 的方法,但是检查和处理这些的“正确”方
谁能告诉我是否可以在 Controller 规范中 stub params[] 值,以便 Controller 接受 stub 值作为 View 中的实际 params[] 值。 例如,我的观点有一个
我的问题是没有在 UserControl 中连接 DependencyProperties。这不是问题。当我将 UserControl 中的按钮绑定(bind)到 UserControl 的 Depe
如何#define 路径 L"C:\Windows\System32\taskmgr.exe"来处理宽字符 #define TASK_MGR "C:\\Windows\\System32\\taskm
我正在尝试使用 Jasmine 和 Sion 编写单元测试,但是在使用 RequireJs 加载模块时我很难找到以下等效项: sinon.stub(window, "MyItemView"); 使用
我有一个包含三个 div 的示例页面,如下所示: 当浏览器大小达到 md 点并且第二个 div 高于第一个 div 时,第三个 div 开始在第一个的右侧
我在 C++ 端有 CString cs,在 C# 端有 IntPtr ip,它通过编码(marshal)处理机制包含 cs 的值。 然后,我只需将需要的字符串作为 Marshal.PtrToStri
我是一名优秀的程序员,十分优秀!