html - 在 R 中自定义传单 map 图标

Question

我开始学习如何使用传单 map 中的搜索功能 - 下面是一张传单 map ，可让您搜索城市(即单个搜索词):

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

# using the same reproducible data from the question/example
cities <- na.omit(read.csv(
    textConnection("City,Lat,Long,Pop, term1, term2
                    Boston,42.3601,-71.0589,645966, AAA, BBB
                    Hartford,41.7627,-72.6743,125017, CCC, DDD
                    New York City,40.7127,-74.0059,8406000, EEE, FFF
                    Philadelphia,39.9500,-75.1667,1553000, GGG, HHH
                    Pittsburgh,40.4397,-79.9764,305841, III, JJJ
                    Providence,41.8236,-71.4222,177994, JJJ, LLL
                    ")))


# CODE 1


leaflet(cities) %>%
    addProviderTiles(providers$OpenStreetMap) %>%
    addMarkers( clusterOptions = markerClusterOptions()) %>%
                    addResetMapButton() %>%
                    # these markers will be "invisible" on the map:
                    addMarkers(
                        data = cities, lng = ~Long, lat = ~Lat, label = cities$City,
                        group = 'cities', # this is the group to use in addSearchFeatures()
                        # make custom icon that is so small you can't see it:
                        icon = makeIcon(
                            iconUrl = "https://leafletjs.com/examples/custom-icons/leaf-green.png",
                            iconWidth = 1, iconHeight = 1
                        )
                    ) %>%
                    addSearchFeatures(
                        targetGroups = 'cities', # group should match addMarkers() group
                        options = searchFeaturesOptions(
                            zoom=12, openPopup = TRUE, firstTipSubmit = TRUE,
                            autoCollapse = TRUE, hideMarkerOnCollapse = TRUE
                        )
                    )

在上一个问题 ( Correctly Specifying Vectors in R ) 中，我学习了如何制作允许多个搜索词的传单 map :

# CODE 2

leaflet(cities) %>%
  addProviderTiles(providers$OpenStreetMap) %>%
  addMarkers(clusterOptions = markerClusterOptions()) %>%
  addResetMapButton() %>%
  # these markers will be "invisible" on the map:
  addMarkers(
    data = cities, lng = ~Long, lat = ~Lat, label = cities$City,
    group = 'cities',# this is the group to use in addSearchFeatures()
    # make custom icon that is so small you can't see it:
    icon = makeIcon(
      iconUrl = "https://leafletjs.com/examples/custom-icons/leaf-green.png",
      iconWidth = 1, iconHeight = 1
    )) %>%
  addMarkers(data = cities, lng = ~Long, lat = ~Lat, 
             label = cities$term1, group = 'term1') %>% 
  addMarkers(data = cities, lng = ~Long, lat = ~Lat, 
             label = cities$term2, group = 'term2') %>% 
  addSearchFeatures(
    targetGroups = c('cities', 'term1', 'term2'), # group should match addMarkers() group
    options = searchFeaturesOptions(
      zoom=12, openPopup = TRUE, firstTipSubmit = TRUE,
      autoCollapse = TRUE, hideMarkerOnCollapse = TRUE
    )
  )

关于 CODE 2 我想改变的一件事:

• 在代码 1 中，当您放大和缩小时，“蓝色图钉”会“塌陷”到“绿色圆圈”中。

• 在 CODE 2 中，蓝色图钉和绿色圆圈不会相互折叠。有办法改变吗？

谢谢!

Answer 1

您必须确保所有标记都具有相同的图标，以便它们聚类。

leaflet(cities) %>%
  addProviderTiles(providers$OpenStreetMap) %>%
  addMarkers(clusterOptions = markerClusterOptions()) %>%
  addResetMapButton() %>%
  # these markers will be "invisible" on the map:
  addMarkers(
    data = cities, lng = ~Long, lat = ~Lat, label = cities$City,
    group = 'cities',# this is the group to use in addSearchFeatures()
    # make custom icon that is so small you can't see it:
    icon = makeIcon(
      iconUrl = "https://leafletjs.com/examples/custom-icons/leaf-green.png",
      iconWidth = 1, iconHeight = 1
    )) %>%
  addMarkers(data = cities, lng = ~Long, lat = ~Lat,
             label = ~term1, group = 'term1',
             icon = makeIcon(                              # <----- I'm new!
               iconUrl = "https://leafletjs.com/examples/custom-icons/leaf-green.png",
               iconWidth = 1, iconHeight = 1
             )) %>% 
  addMarkers(data = cities, lng = ~Long, lat = ~Lat, 
             label = ~term2, group = 'term2',
             icon = makeIcon(                              # <----- I'm new!
               iconUrl = "https://leafletjs.com/examples/custom-icons/leaf-green.png",
               iconWidth = 1, iconHeight = 1
             )) %>% 
  addSearchFeatures(
    targetGroups = c('cities', 'term1', 'term2'), # group match addMarkers() group
    options = searchFeaturesOptions(
      zoom=12, openPopup = TRUE, firstTipSubmit = TRUE,
      autoCollapse = TRUE, hideMarkerOnCollapse = TRUE
    )
  ) 

我看了很长时间，现在回想起来……为什么？现在看起来很简单，我知道答案了。叹。你和我，对吧？如果您有任何问题，请告诉我。