Javascript 通过 R 向传单多边形添加click事件

我们可以在传单htmlwidget中使用htmlwidgets::onRender到pass custom JS code.

借助eachLayer方法，我们可以 for each 多边形层添加一个点击功能:

---
  title: "leaflet polygons clicks"
  output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)

library(tidyverse)
library(htmltools)
library(leaflet)
library(sf)
library(htmlwidgets)

```

```{r cars, echo=FALSE}

url <- 'https://opendata.arcgis.com/api/v3/datasets/bf9d32b1aa9941af84e6c2bf0c54b1bb_0/downloads/data?format=geojson&spatialRefId=4326'
wardShapes <- sf::st_read(url) %>%
  filter(WD21CD >= "E05011175" & WD21CD <= "E05011181")

leaflet(wardShapes,elementId = "bhamMap",
        height = 550,# width = 10,
        options = leafletOptions(minZoom = 10, maxZoom = 14)) %>%
  addTiles() %>%
  setView(lng = -1.810, lat = 52.555, zoom = 12) %>%
  addPolygons(
    weight = 0.5, smoothFactor = 0.5,
    opacity = 1.0, fillOpacity = 0.2,
    highlightOptions = highlightOptions(color = "white", weight = 2, bringToFront = TRUE),
    label = ~ as.character(WD21NM),
    labelOptions = (interactive = TRUE),
    options = pathOptions(title = ~ WD21CD, customdata = ~ WD21NM)
  ) %>% htmlwidgets::onRender("
                            function(el, x) {
                              var map = this;
                              map.eachLayer(function(layer) {
                                if(layer instanceof L.Polygon){
                                  layer.on('click', function(e){
                                    alert('You clicked on layer._leaflet_id: ' + layer._leaflet_id + '\\nWD21CD: ' + layer.options.title + '\\ncustomdata: ' + layer.options.customdata);
                                  })
                                  .addTo(map)
                                }
                              });
                            }
                            ")

```