如何调整folium中Colorscale的位置与旋转角度？

直接修改原生配色栏的定位与旋转 #

folium和branca的原生API确实没有提供直接固定坐标、旋转配色栏的参数，但可以通过自定义CSS与JavaScript实现：

• branca生成的配色栏是HTML元素，可通过类名（如branca-colorbar）选中，用CSS设置position: fixed/absolute配合top/left等属性固定位置；
• 旋转90度可借助CSS的transform: rotate(90deg)，同时调整transform-origin避免元素错位。
• 示例代码片段：

  import folium
  from branca.colormap import LinearColormap
  
  m = folium.Map(location=[45.523, -122.675], zoom_start=13)
  colormap = LinearColormap(['blue', 'red'], vmin=0, vmax=10)
  colormap.add_to(m)
  
  # 注入自定义样式
  custom_css = """
  <style>
  .branca-colorbar {
      position: fixed !important;
      top: 50px !important;
      left: 20px !important;
      transform: rotate(90deg) !important;
      transform-origin: top left !important;
  }
  </style>
  """
  m.get_root().html.add_child(folium.Element(custom_css))
  
  m.save('map.html')
  

  注意：此方法依赖branca生成的元素类名，版本更新后类名若变更需重新调试选择器。

导出配色栏为PNG后用ImageLayer添加 #

这种方法稳定性更强，不受HTML结构变化影响：

• 用matplotlib生成与branca配色一致的垂直配色栏图片：

  import matplotlib.pyplot as plt
  import numpy as np
  
  # 匹配branca的配色范围
  colors = ['blue', 'red']
  vmin, vmax = 0, 10
  gradient = np.linspace(vmin, vmax, 256)
  gradient = np.vstack((gradient, gradient))
  
  fig, ax = plt.subplots(figsize=(0.5, 6))
  ax.imshow(gradient, aspect='auto', cmap=plt.cm.colors.ListedColormap(colors))
  ax.set_yticks(np.linspace(0, 255, 5))
  ax.set_yticklabels([str(int(v)) for v in np.linspace(vmin, vmax, 5)])
  ax.set_xticks([])
  plt.savefig('colormap.png', bbox_inches='tight', pad_inches=0)
  plt.close()
  

• 用ImageOverlay将图片添加到地图指定地理坐标：

  # 调整bounds参数控制配色栏的位置与大小
  image_layer = folium.raster_layers.ImageOverlay(
      image='colormap.png',
      bounds=[[45.51, -122.71], [45.53, -122.69]],
      opacity=1
  )
  image_layer.add_to(m)
  

  该方案可精确控制配色栏在地图上的地理位置，样式完全由生成的图片决定，兼容性更好。

总结 #

• 若追求快速实现且能接受依赖HTML结构，可选择自定义CSS/JS修改原生配色栏；
• 若需要长期稳定、精确的地理坐标定位，导出为PNG后用ImageOverlay添加是更可靠的方案。

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