Question

我想在地图上绘制多个有多个重叠的圆。我想使用fillOpacity参数填充圆圈。但是，我将fillOpacity设置为0.5，并且两个fillOpacity重叠的圆在交点内将有所不同。我希望fillOpacity在交点内也具有“值为0.5”。这样透明度在两个圆的整个区域都是均匀的。

（有光泽的解决方案也可能会引起人们的兴趣）。

library(leaflet)
m <- leaflet() %>% addTiles()
m <- m %>% setView(-93.65, 42.0285, zoom = 15)
m %>% addCircles(-93.65, 42.0285, radius = 400, stroke = FALSE, fillOpacity = 0.5) %>%
  addCircles(-93.655, 42.0255, radius = 400, stroke = FALSE, fillOpacity = 0.5)

编辑：

给出评论，我再次尝试。这是我的最佳尝试（正在工作）：（从此处启发：Is it possible to include custom css in htmlwidgets for R and/or LeafletR?）。我选择g标签，因为圆圈似乎包裹在该标签内。这可能是一个肮脏的解决方法，因为其他元素也可能也包裹在该标签中。

library(leaflet)
library(htmltools)
m <- leaflet() %>% addTiles()
m <- m %>% setView(-93.65, 42.0285, zoom = 15)
m <- m %>% addCircles(-93.65, 42.0285, radius = 400, stroke = FALSE, fillOpacity = 1) %>%
  addCircles(-93.655, 42.0255, radius = 400, stroke = FALSE, fillOpacity = 1)

browsable(
  tagList(list(
    tags$head(
      tags$style('g{opacity:0.3;}')
    ),
    m
  ))
)

闪亮尝试（正在工作）：

library(shiny)
library(leaflet)

ui <- fluidPage(
  tags$head(
    tags$style('g{opacity:0.2'),
    tags$script("
      $('div.leaflet-overlay-pane').css('fill-opacity', '0.5');
    ")
  ),
  leafletOutput("mymap")
)

server <- function(input, output, session) {
    output$mymap <- renderLeaflet({
    leaflet() %>%
      addProviderTiles(providers$Stamen.TonerLite,
                       options = providerTileOptions(noWrap = TRUE)
      ) %>%
      addCircles(lng = rnorm(40) * 2 + 13, lat = rnorm(40) + 48, radius = 100000, stroke = FALSE,
                 fillOpacity = 1, group = "ABCD")
  })
}

shinyApp(ui, server)

Answer 1

因此，将g元素样式的不透明度（而非填充不透明度）设置为所需的数量，并将标记/圆圈保留为1的填充不透明度似乎可以起作用：

---
title: "R Notebook"
output:
  html_document:
    df_print: paged
---

<style>
g {
  opacity: 0.5;
}
</style>

```{r leaflet_plot, echo=FALSE, warning=FALSE}
library(leaflet)
m <- leaflet() %>% addTiles()
m <- m %>% setView(-93.65, 42.0285, zoom = 15)
m %>% 
  addCircles(-93.65, 42.0285, radius = 400, stroke = FALSE, fillOpacity = 1) %>%
  addCircles(-93.655, 42.0255, radius = 400, stroke = FALSE, fillOpacity = 1)
```

当然，g元素可能太宽泛/危险，但至少现在有了这个主意。这非常符合使父元素控制不透明度（如注释和链接的问题）的精神。

我尝试将各种形式的代码添加到rmarkdown中，但从未成功：

```{js}
$('class-of-circles').wrap('div style="opacity: 0.5"></div>);
```

添加非Rmarkdown示例：

library(shiny)
library(leaflet)

ui <- fluidPage(
  tags$head(
    tags$style('g { opacity: 0.2 }'),
    tags$script("
      $('div.leaflet-overlay-pane').css('fill-opacity', '0.5');
    ")
  ),
  leafletOutput("mymap")
)

server <- function(input, output, session) {
    output$mymap <- renderLeaflet({
    leaflet() %>%
      addProviderTiles(
          providers$Stamen.TonerLite,
          options = providerTileOptions(noWrap = TRUE)
      ) %>%
      addCircles(
          lng = rnorm(40) * 2 + 13, 
          lat = rnorm(40) + 48, 
          radius = 100000, 
          stroke = FALSE,
          fillOpacity = 1, 
          group = "ABCD"
      )
  })
}

shinyApp(ui, server)

将重叠的圆圈添加到具有均匀透明度的传单地图中

1 个答案: