R Leaflet: назначьте несколько групп слою для фильтрации данных и изменения представленного столбца - PullRequest
Новая
       23

R Leaflet: назначьте несколько групп слою для фильтрации данных и изменения представленного столбца

1 голос
/ 09 июля 2020

Я пытаюсь найти способ включить в буклет R кнопки наложения, которые отфильтровывают группы в данных. Мне также нужно включить радиокнопки, которые переключают столбец, представленный в данных. Кажется, я не могу найти способ сделать это в листовке R с помощью функции addLayersControl ().

Сначала я подумал, что можно добавить несколько групп на один слой и использовать baseGroups и overlayGroups (как видно в коде ниже). Однако это не дает желаемых результатов. Я был бы признателен, если бы кто-нибудь мог предложить альтернативный способ достижения этой цели. Желательно без блеска. 

library(dplyr)
library(leaflet)

data <- data.frame(Name = c("A", "A", "A", "B", "B", "C", "C", "C"),
                   Value1 = c(12,43,54,34,23,77,44,22),
                   Value2 = c(6,5,2,7,5,6,4,3),
                   Lat = c(51.1, 51.6, 57.3, 52.4, 56.3, 54.3, 60.4, 49.2),
                   Lon = c(5, -3, -2, -1, 4, 3, -5, 0))
data %>%
  leaflet() %>%
  addProviderTiles(providers$CartoDB.Positron) %>%
  addCircles(lat=~Lat, lng=~Lon, radius = ~Value1*1000, group=c(~Name, "Value1")) %>%
  addCircles(lat=~Lat, lng=~Lon, radius = ~Value2, group=c(~Name, "Value2")) %>%
  addLayersControl(
    baseGroups = c("Value1", "Value2"),
    overlayGroups = c("A", "B", "C"),
    options = layersControlOptions(collapsed = F)
  )

Изображение: вывод не такой, как я ожидал

1 Ответ

2 голосов
/ 10 июля 2020

Ниже очень неэлегантное и хакерское решение проблемы. Он назначает идентификатор слоя каждому кругу и использует некоторые javascript, чтобы определить, какой круг должен отображаться с учетом флажков ввода.

Рабочую демонстрацию можно найти здесь: https://rpubs.com/Jumble/leaflet_layer_control

Поделитесь пожалуйста, есть ли у кого более элегантное решение. 

library(dplyr)
library(leaflet)
library(htmlwidgets)

data <- data.frame(ID = c("1", "2","3","4","5","6","7","8"),
                   Name = c("A", "A", "A", "B", "B", "C", "C", "C"),
                   Value1 = c(12,43,54,34,23,77,44,22),
                   Value2 = c(6,5,2,7,5,6,4,3),
                   Lat = c(51.1, 51.6, 57.3, 52.4, 56.3, 54.3, 60.4, 49.2),
                   Lon = c(5, -3, -2, -1, 4, 3, -5, 0))
data %>%
  leaflet() %>%
  addProviderTiles(providers$CartoDB.Positron) %>%
  addCircles(lat=~Lat, lng=~Lon, radius = ~Value1*1000, group=~Name, label=~Name, popup=~as.character(Value1), layerId = ~paste(ID,"Value1", sep="")) %>%
  addCircles(lat=~Lat, lng=~Lon, radius = ~Value2, group=~Name, label=~Name, popup=~as.character(Value2), layerId = ~paste(ID,"Value2", sep="")) %>%
  addLayersControl(
    baseGroups = c("Value1", "Value2"),
    overlayGroups = c("A", "B", "C"),
    options = layersControlOptions(collapsed = F)
  ) %>%
  htmlwidgets::onRender("
    function(el, x) {
      var myMap = this;
      var baseLayer = 'Value1';
      myMap.eachLayer(function(layer){
        var id = layer.options.layerId;
        if (id){
          if ('Value1' !== id.substring(1,)){
            layer.getElement().style.display = 'none';
          }
        }
      })
      console.log(myMap.baselayer);
      myMap.on('baselayerchange',
        function (e) {
          baseLayer=e.name;
          myMap.eachLayer(function (layer) {
              var id = layer.options.layerId;
              if (id){
                if (e.name !== id.substring(1,)){
                  layer.getElement().style.display = 'none';
                  layer.closePopup();
                }
                if (e.name === id.substring(1,)){
                  layer.getElement().style.display = 'block';
                }
              }

          });
        })
        myMap.on('overlayadd', function(e){
          myMap.eachLayer(function(layer){
            var id = layer.options.layerId;
            if (id){
                if (baseLayer !== id.substring(1,)){
                  layer.getElement().style.display = 'none';
                }
            }    
          })
        })
    }")
...