ShinyProxy部署的R Shiny应用中Leaflet聚合簇标记颜色自定义问题

解决方案 #

你需要通过markerClusterOptions的iconCreateFunction参数传入自定义JavaScript逻辑，实现聚合簇的颜色判断，完整修改后的代码如下：

# 1. 预处理点位数据，新增是否为告警点位的标记字段
dfMap$is_alarm <- ifelse(dfMap$Id %in% alarm$id, 1, 0)

# 2. 点位颜色生成函数
getColor <- function(is_alarm) {
  ifelse(is_alarm == 1, "red", "green")
}

icons <- awesomeIcons(
  icon = 'ios-close',
  iconColor = 'black',
  library = 'ion',
  markerColor = ~getColor(is_alarm)
)

# 3. 自定义聚合簇生成的JS函数
cluster_icon_js <- htmlwidgets::JS("
  function(cluster) {
    // 获取簇内所有子标记
    const markers = cluster.getAllChildMarkers();
    let has_alarm = false;
    // 遍历判断是否存在告警点位
    for (let i = 0; i < markers.length; i++) {
      if (markers[i].options.is_alarm == 1) {
        has_alarm = true;
        break;
      }
    }
    // 定义簇尺寸规则，可按需调整阈值
    const count = cluster.getChildCount();
    let size = 'small';
    if (count > 10) size = 'medium';
    if (count > 100) size = 'large';
    // 返回对应颜色的簇图标
    return L.divIcon({
      html: '<div><span>' + count + '</span></div>',
      className: 'marker-cluster marker-cluster-' + (has_alarm ? 'red' : 'green') + ' marker-cluster-' + size,
      iconSize: new L.Point(40, 40)
    });
  }
")

# 4. 地图渲染时传入自定义配置
map =  leaflet(dfMap, options = leafletOptions(worldCopyJump = T)) %>% 
  addTiles() %>%
  addAwesomeMarkers(
    lng = ~as.numeric(lon), 
    lat = ~as.numeric(lat), 
    icon = icons, 
    label = ~as.character(Id), 
    # 传递自定义属性给JS层用于判断
    options = markerOptions(is_alarm = ~is_alarm),
    # 传入自定义簇生成函数
    clusterOptions = markerClusterOptions(iconCreateFunction = cluster_icon_js)
  )

output$alarmMap = renderLeaflet(map)

样式自定义说明 #

如果需要调整聚合簇的外观，可以在Shiny的UI部分加入以下CSS代码：

/* 红色告警簇样式 */
.marker-cluster-red {
  background-color: rgba(255, 0, 0, 0.6);
}
.marker-cluster-red div {
  background-color: rgba(255, 0, 0, 0.8);
  color: #fff;
}
/* 绿色正常簇样式 */
.marker-cluster-green {
  background-color: rgba(0, 255, 0, 0.6);
}
.marker-cluster-green div {
  background-color: rgba(0, 255, 0, 0.8);
  color: #fff;
}

内容的提问来源于stack exchange，提问作者tom