Блог

Я хочу создать карту с точками и отзывчивую тепловую карту, используя перекрестные помехи в R. Вот так:

 library(crosstalk)
library(leaflet)
library(DT)

# Wrap data frame in SharedData
sd <- SharedData$new(quakes[sample(nrow(quakes), 10),])

bscols(
  # Create a filter input
  filter_slider("mag", "Magnitude", sd, column=~mag, step=0.1, width=250),
  leaflet(sd) %>% addTiles() %>% addMarkers() %>% addHeatmap())
)
  

Но, как можно заметить после запуска кода, этот способ не дает эффекта реагирования на тепловую карту при фильтрации

Как я могу добиться эффекта?

Это можно легко сделать с помощью Shiny. Однако, если вы действительно не хотите использовать перекрестные помехи, вам придется добавить некоторый javascript для перерисовки тепловой карты каждый раз, когда меняются маркеры, поскольку перекрестные помехи по какой-то причине не могут этого сделать.

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

Ниже приведен код, который произвел это:

 library(crosstalk)
library(leaflet)
library(leaflet.extras)
library(dplyr)

# Wrap data frame in SharedData
sd <- SharedData$new(quakes[sample(nrow(quakes), 10),])

bscols(widths=c(3,9),
  # Create a filter input
  filter_slider("mag", "Magnitude", sd, column=~mag, step=0.1),
  leaflet(sd) %>% 
    addTiles() %>% 
    addMarkers() %>% 
    addHeatmap(layerId="heatmap") %>%
    removeHeatmap("heatmap") %>%
    htmlwidgets::onRender("
      function(el,x){
        var myMap = this;
        var coord_state;
        var coords;
        
        function get_markers(){
          coord_state = [];
          myMap.eachLayer(function(layer){
            if (typeof layer.options.lat != 'undefined'){
              coord_state.push([layer.options.lat, layer.options.lng, 0.5]);
            }
          })
          return(coord_state)
        }
        
        function update_layer(){
          coords = get_markers()
          heat1.setLatLngs(coords);
          heat1.redraw();
        }
        
        var heat1 = L.heatLayer(get_markers(), {radius: 25}).addTo(myMap);
        myMap.on('layerremove', update_layer);
        myMap.on('layeradd', update_layer);
      }
    "))