Leaflet插件和leafletProxy [英] leaflet plugin and leafletProxy

问题描述

我已经将 TextPath 插件添加到一个闪亮的应用中，类似于此示例.效果很好:

I've added the leaflet TextPath plugin to a shiny app in analogy to this example. This works pretty well:

output$fullscreen_map <- renderLeaflet({
  points <- points_reactive()

  points %>%
    leaflet() %>% 
    addTiles() %>%
    fitBounds(~min(lon), ~min(lat), ~max(lon), ~max(lat)) %>%
    registerPlugin(textPathPlugin) %>%
    onRender("function(el, x, data) {
                data = HTMLWidgets.dataframeToD3(data);
                data = data.map(function(val) { return [val.lat, val.lon]; });
                var layer = L.polyline(data);
                layer.on('mouseover', function () {
                this.setText('  ►  ', {repeat: true, attributes: {fill: 'blue'}});
                });
                layer.on('mouseout', function () {
                this.setText(null);
                });
                layer.addTo(this);
    }", data = points)

})

根据文档，我现在想使用leafletProxy()只要反应性数据源发生更改，整个地图就不会重绘. ,，使用以下代码段

In accordance with the docs I would now like to use leafletProxy() so that the entire map doesn't get redrawn whenever the reactive data source changes. Alas, using the following snippet of code

leafletProxy("fullscreen_map", data = points) %>%
  onRender("function(el, x, data) {
              data = HTMLWidgets.dataframeToD3(data);
              data = data.map(function(val) { return [val.lat, val.lon]; });
              var layer = L.polyline(data);
              layer.on('mouseover', function () {
              this.setText('  ►  ', {repeat: true, attributes: {fill: 'blue'}});
              });
              layer.on('mouseout', function () {
              this.setText(null);
              });
              layer.addTo(this);
  }", data = points)

不能按预期工作.我认为这是因为onRender仅在发生新渲染时调用，并且leafletProxy的全部要点是不重新渲染吗?如果正确，是否可以使用其他方法来做到这一点?

does not work as intended. I assume this is because onRender is only called when a new render occurs and the whole point of leafletProxy is to not re-render? If this is correct, is there a way to do this using other methods?

推荐答案

虽然可能会有更简洁的方法，但可能类似于以下内容.

It could be something like below, although there would be more cleaner methods.

我所做的是使用leafletProxy从points_reactive()函数添加折线图层，同时将组设置为reactive.我曾经听过地图的layeradd事件，如果添加了带有reactive组的图层，则添加了textPath.

What I did was to use leafletProxy to add polylines layer from points_reactive() function, while setting group to be reactive. I used listened to layeradd event of map, and if a layer with reactive group got added, i added the textPath.

output$fullscreen_map <- renderLeaflet({
  points <- points_reactive()

  points %>%
    leaflet() %>% 
    addTiles() %>%
    fitBounds(~min(lon), ~min(lat), ~max(lon), ~max(lat)) %>%
    registerPlugin(textPathPlugin) %>%
    onRender("function(el, x, data) {
              var mymap = this;

              mymap.on('layeradd',
                function(e) {
                  console.log(e);
                  var layer = e.layer;

                  if (layer.groupname == 'reactive') {
                    layer.on('mouseover', function () {
                      this.setText('  ►  ', {repeat: true, attributes: {fill: 'blue'}});
                    });
                    layer.on('mouseout', function () {
                      this.setText(null);
                    });
                  }
                }
              );

            }", data = points)

  })

  observeEvent(input$clickme,{
               points <- points_reactive()

               leafletProxy('fullscreen_map') %>%
                 addPolylines(lng=points$lon, lat=points$lat, group='reactive')

  }
)
}

这篇关于Leaflet插件和leafletProxy的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！