只有在Shiny中缩放超过阈值时才渲染leaflet地图。

huangapple
go评论157阅读模式
英文:

Only render leaflet map when zoom passes a threshold in Shiny

问题

在Shiny应用程序中，我已经构建了一个Leaflet地图，根据缩放级别的不同显示不同的图层。

我使用了leafletProxy与observeEvent以及Leaflet的input$MAPID_zoom来构建这个地图。

  1. server <- shinyServer(function(input, output, session) {
  2.   
  3.   output$map <- renderLeaflet({
  4.     leaflet() %>%
  5.       addTiles() %>%
  6.       mapOptions(zoomToLimits="first") %>%
  7.       setView(lat = 47.218637, lng = -1.554136, zoom = 7)
  8.   })
  9.   
  10.   observeEvent(
  11.     eventExpr = input$map_zoom, {
  12.       map_proxy <- leafletProxy(mapId = "map", session = session)
  13.       
  14.         if(input$map_zoom < 8){
  15.           map_proxy %>%
  16.             clearMarkers() %>%
  17.             addMarkers(
  18.               data = df, lng = ~lng, lat = ~lat
  19.             )
  20.         } else {
  21.           map_proxy %>%
  22.             clearMarkers() %>%
  23.             addMarkers(
  24.               data = df_2, lng = ~lng, lat = ~lat
  25.             )
  26.         }
  27.       
  28.     }
  29.   )
  30. })

然而，这会在缩放级别变化时重新渲染Leaflet地图。我希望地图只在if语句中的阈值被超过时才重新渲染。有什么方法可以解决这个问题？

UI和数据的代码如下：

  1. library(shiny)
  2. library(leaflet)
  4. df <- data.frame(
  5.   location_name = c('S1', 'S2'),
  6.   lng = c(-1.554136,  -2.10401),
  7.   lat = c(47.218637, 47.218637), 
  8.   stringsAsFactors = FALSE
  9. )
  11. df_2 <- data.frame(
  12.   location_name = c('S3', 'S4'),
  13.   lng = c(-1.654136,  -2.2401),
  14.   lat = c(47.218637, 47.218637), 
  15.   stringsAsFactors = FALSE
  16. )
  18. ui <- shinyUI(
  19.   fluidPage(
  20.     leafletOutput(outputId = 'map')
  21.   )
  22. )
英文:

I have built a leaflet map in a Shiny application that shows different layers depending on what zoom you have.

I have built this combining leafletProxy with observeEvent and leaflet's input$MAPID_zoom.

  1. server &lt;- shinyServer(function(input, output, session) {
  2.   
  3.   output$map &lt;- renderLeaflet({
  4.     leaflet() |&gt; 
  5.       addTiles() |&gt; 
  6.       mapOptions(zoomToLimits=&quot;first&quot;) |&gt; 
  7.       setView(lat = 47.218637, lng = -1.554136, zoom = 7)
  8.   })
  9.   
  10.   observeEvent(
  11.     eventExpr = input$map_zoom, {
  12.       map_proxy &lt;- leafletProxy(mapId = &quot;map&quot;, session = session)
  13.       
  14.         if(input$map_zoom &lt; 8){
  15.           map_proxy |&gt; 
  16.             clearMarkers() |&gt; 
  17.         addMarkers(
  18.           data = df, lng = ~lng, lat = ~lat
  19.         )
  20.         } else {
  21.           map_proxy |&gt; 
  22.             clearMarkers() |&gt; 
  23.           addMarkers(
  24.             data = df_2, lng = ~lng, lat = ~lat
  25.           )
  26.         }
  27.       
  28.     }
  29.   )
  30. })

However, this rerenders the leaflet map every time the zoom changes. I would like the map to only render when the threshold in the if-statement is surpassed. What would be a way to approach this?

Code for UI and data:

  1. library(shiny)
  2. library(leaflet)
  4. df &lt;- data.frame(
  5.   location_name = c(&#39;S1&#39;, &#39;S2&#39;),
  6.   lng = c(-1.554136,  -2.10401),
  7.   lat = c(47.218637, 47.218637), 
  8.   stringsAsFactors = FALSE
  9. )
  11. df_2 &lt;- data.frame(
  12.   location_name = c(&#39;S3&#39;, &#39;S4&#39;),
  13.   lng = c(-1.654136,  -2.2401),
  14.   lat = c(47.218637, 47.218637), 
  15.   stringsAsFactors = FALSE
  16. )
  18. ui &lt;- shinyUI(
  19.   fluidPage(
  20.     leafletOutput(outputId = &#39;map&#39;)
  21.   )
  22. )

答案1

得分: 1

我无法重现你的问题，但这里有一个解决方案。
你需要创建两个图层并调整可见性。

  1. server <- shinyServer(function(input, output, session) {
  2.   
  3.   output$map <- renderLeaflet({
  4.     leaflet() %>%
  5.       addTiles() %>%
  6.       mapOptions(zoomToLimits="first") %>%
  7.       setView(lat = 47.218637, lng = -1.554136, zoom = 7) %>%
  8.       addMarkers(
  9.         data = df, lng = ~lng, lat = ~lat, group = "S1S2"
  10.       ) %>%
  11.       addMarkers(
  12.         data = df_2, lng = ~lng, lat = ~lat, group="S3S4")
  13.   })
  14.   
  15.   observeEvent(
  16.     eventExpr = input$map_zoom, {
  17.       map_proxy <- leafletProxy(mapId = "map", session = session)
  18.       
  19.       if(input$map_zoom < 8){
  20.         map_proxy %>%
  21.           showGroup("S1S2") %>%
  22.           hideGroup("S3S4")
  23.       } else {
  24.         map_proxy %>%
  25.           showGroup("S3S4") %>%
  26.           hideGroup("S1S2")
  27.       }
  28.       
  29.     }
  30.   )
  31. })

在这里，每个图层都有不同的组ID，根据缩放级别，我们隐藏或显示相应的组。

英文:

I can't reproduce your problem but here is a solution.
You have to create both layers and play with visibility.

  1. server &lt;- shinyServer(function(input, output, session) {
  2.   
  3.   output$map &lt;- renderLeaflet({
  4.     leaflet() |&gt; 
  5.       addTiles() |&gt; 
  6.       mapOptions(zoomToLimits=&quot;first&quot;) |&gt; 
  7.       setView(lat = 47.218637, lng = -1.554136, zoom = 7) |&gt;
  8.       addMarkers(
  9.         data = df, lng = ~lng, lat = ~lat, group = &quot;S1S2&quot;
  10.       ) |&gt; 
  11.       addMarkers(
  12.         data = df_2, lng = ~lng, lat = ~lat, group=&quot;S3S4&quot;)
  13.   })
  14.   
  15.   observeEvent(
  16.     eventExpr = input$map_zoom, {
  17.       map_proxy &lt;- leafletProxy(mapId = &quot;map&quot;, session = session)
  18.       
  19.       if(input$map_zoom &lt; 8){
  20.         map_proxy |&gt; 
  21.           showGroup(&quot;S1S2&quot;) |&gt;
  22.           hideGroup(&quot;S3S4&quot;)
  23.       } else {
  24.         map_proxy |&gt; 
  25.           showGroup(&quot;S3S4&quot;) |&gt;
  26.           hideGroup(&quot;S1S2&quot;)
  27.       }
  28.       
  29.     }
  30.   )
  31. })

Here each layer gets a different group id and depending of the zoom level we hide or show corresponding group.

huangapple
  • 本文由 发表于 2023年6月26日 17:44:53
  • 转载请务必保留本文链接：https://go.coder-hub.com/76555480.html
  • leaflet
  • r
  • shiny
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定