importpandas as pd
importfolium
fromfoliumimportplugins
importrandom
fromniceguiimportui
importos
importwebbrowser
frompathlibimportPath
importnumpy as np
importbase64
fromioimportBytesIO
# 模拟数据生成
defgenerate_mock_data():
# 生成模拟景点数据
locations=[]
base_lat=23.122373
base_lon=113.268027
# 生成100个随机景点数据
foriinrange(100):
# 在基础坐标附近生成随机偏移
lat=base_lat+random.uniform(-0.1,0.1)
lon=base_lon+random.uniform(-0.1,0.1)
# 生成随机数值用于条形图高度和颜色
value=random.uniform(1,100)
locations.append({'lat': lat,'lon': lon,'value': value})
returnpd.DataFrame(locations)
# 生成热力图HTML并转换为base64
defgenerate_heatmap_base64():
data=generate_mock_data()
# 创建地图，使用高德地图底图
heatmap1=folium.Map(
location=[23.122373,113.268027],
zoom_start=10,
control_scale=True,
tiles='http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
attr='© <a href="http://ditu.amap.com/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >高德地图</a>',
# 设置地图背景为蓝紫色
style='background-color: #4B0082;'
)
# 添加中心标记
folium.Marker(
[23.122373,113.268027],
popup='<i>J哥</i>',
icon=folium.Icon(icon='cloud', color='green')
).add_to(heatmap1)
# 为每个点添加七彩条形图（使用SVG图形）
foridx, rowindata.iterrows():
# 创建SVG条形图元素
svg_bar_html=create_svg_bar(row['value'])
# 计算条形图尺寸（长度变为原来的六倍，宽度为原来的四分之一）
bar_width=9# 5 + 2*2 (原始宽度 + 两边边框)
bar_height=max(int(row['value']/5)*6,30)+4# 高度变为原来的六倍 + 两边边框
ifbar_height <34:# 最小高度调整
bar_height=34
icon=folium.DivIcon(
html=svg_bar_html,
icon_size=(bar_width, bar_height),
icon_anchor=(bar_width//2, bar_height//2)# 锚点设置
)
# 在地图上添加标记
folium.Marker(
[row['lat'], row['lon']],
icon=icon,
popup=f"数值: {row['value']:.2f}"
).add_to(heatmap1)
# 添加颜色条例图
add_smooth_color_legend(heatmap1)
# 将地图保存为HTML字符串
map_html=heatmap1._repr_html_()
returnmap_html
# 创建SVG条形图
defcreate_svg_bar(value):
# 计算条形图尺寸（长度变为原来的六倍，宽度为原来的四分之一）
width=5# 20 / 4
height=max(int(value/5)*6,30)# 高度变为原来的六倍
border_width=2# 黄色边框宽度
svg_width=width+2*border_width
svg_height=height+2*border_width
# 创建渐变定义
gradient_id=f"grad_{int(value * 100)}"
# 生成渐变色条
gradient_html=f'''
<svg width="{svg_width}" height="{svg_height}" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="{gradient_id}" x1="0%" y1="100%" x2="0%" y2="0%">
'''
# 添加渐变停止点
num_steps=20
foriinrange(num_steps+1):
stop_value=(i/num_steps)*value
color=get_smooth_color_by_value(stop_value)
offset=i/num_steps
gradient_html+=f'<stop offset="{offset * 100}%" stop-color="{color}" />\n'
gradient_html+=f'''
</linearGradient>
</defs>
<rect x="{border_width}" y="{border_width}" width="{width}" height="{height}"
fill="url(#{gradient_id})" stroke="yellow" stroke-width="{border_width}"/>
</svg>
'''
returngradient_html
# 根据数值映射平滑颜色
defget_smooth_color_by_value(value):
# 归一化数值到0-1范围
normalized_value=min(max(value/100.0,0),1)
# 定义彩虹色谱的关键点
hue=normalized_value*300# 0-300度的色相范围（避免红色重复）
# 将HSV转换为RGB
h=hue/60.0
c=1.0# 饱和度
x=c*(1-abs(h%2-1))
if0<=h <1:
r, g, b=c, x,0
elif1<=h <2:
r, g, b=x, c,0
elif2<=h <3:
r, g, b=0, c, x
elif3<=h <4:
r, g, b=0, x, c
elif4<=h <5:
r, g, b=x,0, c
else:
r, g, b=c,0, x
# 转换为0-255范围
r=int(r*255)
g=int(g*255)
b=int(b*255)
# 转换为十六进制
returnf'#{r:02x}{g:02x}{b:02x}'
# 添加平滑颜色条例图
defadd_smooth_color_legend(m):
# 创建颜色条的HTML（长度变为原来的六倍，宽度为原来的四分之一）
legend_html='''
<div style="
position: fixed;
bottom: 50px;
right: 50px;
z-index:9999;
background-color: white;
padding: 10px;
border:2px solid grey;
border-radius: 5px;
font-size: 14px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
">
<p style="text-align: center; margin: 0 0 10px 0;"><b>数值范围</b></p>
<div style="display: flex; flex-direction: column; height: 900px; width: 7.5px; margin: 0 auto;">
'''
# 生成渐变色条（长度变为原来的六倍）
foriinrange(100,0,-1):# 从100到1
color=get_smooth_color_by_value(i)
legend_html+=f'<div style="height: 9px; background-color: {color}; border: 0.5px solid black;"></div>'# 1.5px * 6
legend_html+='''
</div>
<div style="display: flex; justify-content: space-between; margin-top: 10px;">
<span>0</span>
<span>50</span>
<span>100</span>
</div>
</div>
'''
m.get_root().html.add_child(folium.Element(legend_html))
# 创建NiceGUI界面
@ui.page('/')
defmain():
ui.label('拉长版平滑过渡七彩条形图').classes('text-2xl font-bold')
# 显示地图
defshow_map():
map_html=generate_heatmap_base64()
# 使用ui.html显示地图，添加sanitize=False参数
ui.html(map_html, sanitize=False).classes('w-full h-screen')
# 显示地图按钮
ui.button('显示地图', on_click=show_map).classes('mt-4')
# 显示数据信息
data=generate_mock_data()
ui.label(f'模拟数据点数量: {len(data)}').classes('mt-4')
# 显示前几行数据
ui.label('前5行数据预览:').classes('mt-4')
# 使用正确的ui.table语法
columns=[
{'name':'index','label':'Index','field':'index'},
{'name':'lat','label':'纬度','field':'lat'},
{'name':'lon','label':'经度','field':'lon'},
{'name':'value','label':'数值','field':'value'}
]
rows=[{'index': i,'lat': row['lat'],'lon': row['lon'],'value': row['value']}fori, (idx, row)inenumerate(data.head().iterrows())]
ui.table(columns=columns, rows=rows).props('dense flat bordered').classes('w-full')
# 启动应用
if__name__in{"__main__","__mp_main__"}:
ui.run(title='拉长版平滑过渡七彩条形图应用', port=8080,reload=False)
| 