Python轻松实现某德地图可视化功能

张开发
2026/4/3 13:07:36 15 分钟阅读
Python轻松实现某德地图可视化功能
Python轻松实现某德地图可视化直接给出解决方案一.、生成网页123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657importpandas as pdimportfoliumfromfoliumimportpluginsimportrandom# 模拟数据生成defgenerate_mock_data():# 生成模拟景点数据locations[]base_lat23.122373base_lon113.268027# 生成100个随机景点数据foriinrange(100):# 在基础坐标附近生成随机偏移latbase_latrandom.uniform(-0.1,0.1)lonbase_lonrandom.uniform(-0.1,0.1)locations.append({lat: lat,lon: lon})returnpd.DataFrame(locations)# 使用模拟数据替代CSV读取datagenerate_mock_data()# 创建地图使用高德地图底图正确配置attributionheatmap1folium.Map(location[23.122373,113.268027],zoom_start10,control_scaleTrue,tileshttp://webrd02.is.autonavi.com/appmaptile?langzh_cnsize1scale1style8x{x}y{y}z{z},attrcopy; a hrefhttp://ditu.amap.com/ relexternal nofollow relexternal nofollow relexternal nofollow 高德地图/a)# 添加中心标记folium.Marker([23.122373,113.268027],popupiJ哥/i,iconfolium.Icon(iconcloud, colorgreen)).add_to(heatmap1)# 检查数据中是否存在lat和lon列iflatindata.columnsandlonindata.columns:# 创建热力图数据heat_data[[row[lat], row[lon]]forindex, rowindata.iterrows()]# 添加热力图层heatmap_layerplugins.HeatMap(heat_data)heatmap1.add_child(heatmap_layer)else:print(错误数据中缺少lat或lon列)print(数据列名, data.columns.tolist())# 保存地图heatmap1.save(folium_map1.html)print(地图已保存为 folium_map1.html)print(f使用了 {len(data)} 个模拟数据点)frompathlibimportPath# 路径配置BASE_DIRPath(__file__).parent# 脚本所在目录DB_DIRBASE_DIR/图样DB_DIR.mkdir(exist_okTrue)HTML_FILE_PATHDB_DIR/002.html# 明确HTML文件完整路径# 保存地图heatmap1.save(DB_DIR/folium_map1.html)print(地图已保存为 folium_map1.html)print(f使用了 {len(data)} 个模拟数据点)二、生成服务器网页12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879importpandas as pdimportfoliumfromfoliumimportpluginsimportrandomfromniceguiimportuiimportosimportwebbrowserfrompathlibimportPath# 模拟数据生成defgenerate_mock_data():# 生成模拟景点数据locations[]base_lat23.122373base_lon113.268027# 生成100个随机景点数据foriinrange(100):# 在基础坐标附近生成随机偏移latbase_latrandom.uniform(-0.1,0.1)lonbase_lonrandom.uniform(-0.1,0.1)locations.append({lat: lat,lon: lon})returnpd.DataFrame(locations)# 生成热力图HTMLdefgenerate_heatmap_html():datagenerate_mock_data()# 创建地图使用高德地图底图heatmap1folium.Map(location[23.122373,113.268027],zoom_start10,control_scaleTrue,tileshttp://webrd02.is.autonavi.com/appmaptile?langzh_cnsize1scale1style8x{x}y{y}z{z},attrcopy; a hrefhttp://ditu.amap.com/ relexternal nofollow relexternal nofollow relexternal nofollow 高德地图/a)# 添加中心标记folium.Marker([23.122373,113.268027],popupiJ哥/i,iconfolium.Icon(iconcloud, colorgreen)).add_to(heatmap1)# 检查数据中是否存在lat和lon列iflatindata.columnsandlonindata.columns:# 创建热力图数据heat_data[[row[lat], row[lon]]forindex, rowindata.iterrows()]# 添加热力图层heatmap_layerplugins.HeatMap(heat_data)heatmap1.add_child(heatmap_layer)else:print(错误数据中缺少lat或lon列)print(数据列名, data.columns.tolist())# 保存地图到临时文件temp_filetemp_heatmap.htmlheatmap1.save(temp_file)returntemp_file# 创建NiceGUI界面ui.page(/)defmain():ui.label(热力图可视化).classes(text-2xl font-bold)# 生成热力图按钮defshow_heatmap():html_filegenerate_heatmap_html()# 在新标签页中打开热力图webbrowser.open(ffile://{os.path.abspath(html_file)})ui.notify(f热力图已生成并打开: {html_file})ui.button(生成并查看热力图, on_clickshow_heatmap).classes(mt-4)# 显示数据信息datagenerate_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}]rows[{index: i,lat: row[lat],lon: row[lon]}fori, (idx, row)inenumerate(data.head().iterrows())]ui.table(columnscolumns, rowsrows).classes(w-full)# 启动应用if__name__in{__main__,__mp_main__}:ui.run(title热力图可视化应用, port8080,reloadTrue)改进版123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190importpandas as pdimportfoliumfromfoliumimportpluginsimportrandomfromniceguiimportuiimportosimportwebbrowserfrompathlibimportPathimportnumpy as npimportbase64fromioimportBytesIO# 模拟数据生成defgenerate_mock_data():# 生成模拟景点数据locations[]base_lat23.122373base_lon113.268027# 生成100个随机景点数据foriinrange(100):# 在基础坐标附近生成随机偏移latbase_latrandom.uniform(-0.1,0.1)lonbase_lonrandom.uniform(-0.1,0.1)# 生成随机数值用于条形图高度和颜色valuerandom.uniform(1,100)locations.append({lat: lat,lon: lon,value: value})returnpd.DataFrame(locations)# 生成热力图HTML并转换为base64defgenerate_heatmap_base64():datagenerate_mock_data()# 创建地图使用高德地图底图heatmap1folium.Map(location[23.122373,113.268027],zoom_start10,control_scaleTrue,tileshttp://webrd02.is.autonavi.com/appmaptile?langzh_cnsize1scale1style8x{x}y{y}z{z},attrcopy; a hrefhttp://ditu.amap.com/ relexternal nofollow relexternal nofollow relexternal nofollow 高德地图/a,# 设置地图背景为蓝紫色stylebackground-color: #4B0082;)# 添加中心标记folium.Marker([23.122373,113.268027],popupiJ哥/i,iconfolium.Icon(iconcloud, colorgreen)).add_to(heatmap1)# 为每个点添加七彩条形图使用SVG图形foridx, rowindata.iterrows():# 创建SVG条形图元素svg_bar_htmlcreate_svg_bar(row[value])# 计算条形图尺寸长度变为原来的六倍宽度为原来的四分之一bar_width9# 5 2*2 (原始宽度 两边边框)bar_heightmax(int(row[value]/5)*6,30)4# 高度变为原来的六倍 两边边框ifbar_height 34:# 最小高度调整bar_height34iconfolium.DivIcon(htmlsvg_bar_html,icon_size(bar_width, bar_height),icon_anchor(bar_width//2, bar_height//2)# 锚点设置)# 在地图上添加标记folium.Marker([row[lat], row[lon]],iconicon,popupf数值: {row[value]:.2f}).add_to(heatmap1)# 添加颜色条例图add_smooth_color_legend(heatmap1)# 将地图保存为HTML字符串map_htmlheatmap1._repr_html_()returnmap_html# 创建SVG条形图defcreate_svg_bar(value):# 计算条形图尺寸长度变为原来的六倍宽度为原来的四分之一width5# 20 / 4heightmax(int(value/5)*6,30)# 高度变为原来的六倍border_width2# 黄色边框宽度svg_widthwidth2*border_widthsvg_heightheight2*border_width# 创建渐变定义gradient_idfgrad_{int(value * 100)}# 生成渐变色条gradient_htmlfsvg width{svg_width} height{svg_height} xmlnshttp://www.w3.org/2000/svgdefslinearGradient id{gradient_id} x10% y1100% x20% y20%# 添加渐变停止点num_steps20foriinrange(num_steps1):stop_value(i/num_steps)*valuecolorget_smooth_color_by_value(stop_value)offseti/num_stepsgradient_htmlfstop offset{offset * 100}% stop-color{color} /\ngradient_htmlf/linearGradient/defsrect x{border_width} y{border_width} width{width} height{height}fillurl(#{gradient_id}) strokeyellow stroke-width{border_width}//svgreturngradient_html# 根据数值映射平滑颜色defget_smooth_color_by_value(value):# 归一化数值到0-1范围normalized_valuemin(max(value/100.0,0),1)# 定义彩虹色谱的关键点huenormalized_value*300# 0-300度的色相范围避免红色重复# 将HSV转换为RGBhhue/60.0c1.0# 饱和度xc*(1-abs(h%2-1))if0h 1:r, g, bc, x,0elif1h 2:r, g, bx, c,0elif2h 3:r, g, b0, c, xelif3h 4:r, g, b0, x, celif4h 5:r, g, bx,0, celse:r, g, bc,0, x# 转换为0-255范围rint(r*255)gint(g*255)bint(b*255)# 转换为十六进制returnf#{r:02x}{g:02x}{b:02x}# 添加平滑颜色条例图defadd_smooth_color_legend(m):# 创建颜色条的HTML长度变为原来的六倍宽度为原来的四分之一legend_htmldiv styleposition: 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 styletext-align: center; margin: 0 0 10px 0;b数值范围/b/pdiv styledisplay: flex; flex-direction: column; height: 900px; width: 7.5px; margin: 0 auto;# 生成渐变色条长度变为原来的六倍foriinrange(100,0,-1):# 从100到1colorget_smooth_color_by_value(i)legend_htmlfdiv styleheight: 9px; background-color: {color}; border: 0.5px solid black;/div# 1.5px * 6legend_html/divdiv styledisplay: flex; justify-content: space-between; margin-top: 10px;span0/spanspan50/spanspan100/span/div/divm.get_root().html.add_child(folium.Element(legend_html))# 创建NiceGUI界面ui.page(/)defmain():ui.label(拉长版平滑过渡七彩条形图).classes(text-2xl font-bold)# 显示地图defshow_map():map_htmlgenerate_heatmap_base64()# 使用ui.html显示地图添加sanitizeFalse参数ui.html(map_html, sanitizeFalse).classes(w-full h-screen)# 显示地图按钮ui.button(显示地图, on_clickshow_map).classes(mt-4)# 显示数据信息datagenerate_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(columnscolumns, rowsrows).props(dense flat bordered).classes(w-full)# 启动应用if__name__in{__main__,__mp_main__}:ui.run(title拉长版平滑过渡七彩条形图应用, port8080,reloadFalse)到此这篇关于Python轻松实现某德地图可视化功能的文章就介绍到这了

更多文章