Добавьте перекрывающиеся круги на карту листовки с однородной прозрачностью

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)

Редактировать:

Учитывая комментарий, я дал ему еще одну попытку.Вот моя лучшая попытка ( сейчас работает ): (Вдохновленный отсюда: Можно ли включить пользовательские CSS в htmlwidgets для R и / или 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)