如何在folium中添加color_map并将图例转为垂直且移至右下角

直接上修改后的完整代码，同时修正你原代码里的小问题：

import folium
import branca.colormap as cm

# 修正颜色映射范围与分段索引匹配，创建分段色卡
color_mapa = cm.linear.YlOrRd_09.scale(10, 100)
color_mapa = color_mapa.to_step(index=[10, 20, 30, 40, 50, 60, 70, 80, 90, 100])
color_mapa.caption = 'Colors'

# 初始化地图
m = folium.Map(location=[52, 20], zoom_start=7)

# 将色卡添加到地图（原代码重复添加会生成两个图例，只需要一次）
color_mapa.add_to(m)

# 自定义CSS样式，实现图例垂直旋转+右下角定位
custom_css = """
<style>
.branca-colormap {
    position: absolute;
    bottom: 50px;
    right: 20px;
    transform: rotate(90deg);
    transform-origin: bottom right;
}
.branca-colormap .colorbar {
    height: 20px !important;
    width: 200px !important;
}
.branca-colormap .caption {
    transform: rotate(-90deg);
    position: absolute;
    bottom: 80px;
    right: -20px;
}
</style>
"""

# 把自定义CSS注入到地图的HTML头部
m.get_root().html.add_child(folium.Element(custom_css))

# 保存地图文件
m.save('D:\\KMiT\\Python\\mapy\\mapy_test.html')

关键调整说明： #

• 修正色卡范围匹配：原代码里scale(1,10)和分段索引[10,20,...100]不对应，调整scale(10,100)让色卡的数值范围和分段逻辑一致，避免颜色映射出错。
• 移除重复添加：原代码两次调用color_mapa.add_to(m)会生成两个重叠图例，只保留一次即可。
• CSS样式改造：
  • 用position: absolute让图例脱离默认布局，自由定位到右下角
  • transform: rotate(90deg)把水平图例转成垂直方向，transform-origin设置旋转原点为右下角，确保旋转后位置符合预期
  • 调整色条宽高适配垂直显示，同时把标题反向旋转90度，让文字正常垂直展示在图例旁

这样处理后，图例就会变成你示例图里的垂直样式，固定在地图右下角。

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