r - 将重叠的圆圈添加到具有均匀透明度的传单 map 中

Question

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

(如果 Shiny 的解决方案能够促进解决方案，那么它也可能会引起人们的兴趣)。

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
  ))
)

Shiny 的尝试(正在工作):

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)