我正在尝试获取一个.svg文件(image.svg),使其显示在我的大叶草标记弹出窗口中,但我得到的只是一个白色弹出框,其中没有任何内容。该.svg文件与我的.py文件位于同一目录中,请帮助,我的.py如下:
import pandas
import os
import folium
from folium import IFrame
map = folium.Map(location=[38.58, -99.09], zoom_start=6, tiles="Stamen Terrain")
svg = """
<svg width="400" height="400"
<img src="image.svg"/>
</svg>
"""
iframe = IFrame(svg, width=400, height=400)
popup = folium.Popup(iframe, max_width=1000)
icon = folium.Icon(color="red", icon="ok")
marker = folium.Marker(location=[38.58, -99.09], popup=popup, icon=icon)
marker.add_to(map)
map.save(outfile='TestMap.html')
答案 0 :(得分:1)
我尝试了InLaw的上述图像处理方法,它对我有用。通过更多的研究,我能够将图像以及HTML内容一起添加到弹出窗口中。
创建地图
m = folium.Map(location=[53.350496, -6.239456], zoom_start=7, tiles='stamentoner')
对于每个数据点,我插入了一张图像:
for i in range(0,len(data)):
file = 'some-image-file.jpg'
dir_base = os.getcwd()
Filename = dir_base + "/" + file
encoded = base64.b64encode(open(Filename, 'rb').read())
svg = """
<object data="data:image/jpg;base64,{}" width="{}" height="{} type="image/svg+xml">
</object>""".format
您可以根据图像要求更改这些属性
width, height, fat_wh = 300, 300, 1.3
将此添加到iframe:
iframe = IFrame(svg(encoded.decode('UTF-8'), width, height) , width=width*fat_wh, height=height*fat_wh)
将iframe添加到弹出窗口:
popup = folium.Popup(iframe, parse_html = True, max_width=1500)
在Marker中添加弹出窗口,并在Marker中映射m:
folium.Marker([data.iloc[i]['lon'], data.iloc[i]['lat']], icon=folium.Icon(color='brown', icon='anchor', prefix='fa'),
popup=popup).add_to(m)
现在,如果您还希望通过HTML在弹出窗口中的图像旁边添加一些文本,那么可以直接将SVG添加到html中,而不是直接将SVG传递到iframe中,
html = My_htmlStuff
html = html + svg(encoded.decode('UTF-8'), width, height)
然后将您的html添加到iFrame:
iframe = IFrame(html=html , width=width*fat_wh, height=height*fat_wh)
popup = folium.Popup(iframe, parse_html = True)
答案 1 :(得分:0)
就像您可以在“将img添加到弹出窗口”中看到的那样,您无法指向JavaScript中的路径,而需要先对其进行编码:
import os
import folium
print( folium.__version__)
from folium import IFrame
from folium.plugins import FloatImage
import numpy as np
import branca
import base64
import matplotlib.pyplot as plt
lon_ct = 50
fkt=10
num = 60
m = folium.Map((lon_ct , 6), tiles='stamentoner', zoom_start=5 )
lats = (lon_ct * np.cos(np.linspace(0, 2*np.pi, num))/fkt ) + lon_ct
lons = (lon_ct * np.sin(np.linspace(0, 2*np.pi, num))/fkt ) + 10
colors = np.sin(5 * np.linspace(0, 2*np.pi, num))
lgd_txt = '<span style="color: {col};">{txt}</span>'
for idx, color in enumerate( ['red', 'blue']): # color choice is limited
print(color)
fg = folium.FeatureGroup(name= lgd_txt.format( txt= color+' egg', col= color))
pl = folium.features.PolyLine(
list(zip(lats, lons - idx*fkt)),
color=color,
weight=10, )
fg.add_child(pl)
m.add_child( fg)
folium.vector_layers.Marker(location=[50.82416, -0.1265],popup = 'Londonary',
icon= folium.Icon(color='gray', icon_color='yellow',icon = 'fire')
).add_to(m)
try:
## # add img to popup
file = 'milan2.png'
dir_base = os.getcwd()
Filename = dir_base + file
encoded = base64.b64encode(open(Filename, 'rb').read())
svg = """
<object data="data:image/png;base64,{}" width="{}" height="{} type="image/svg+xml">
</object>""".format
width, height, fat_wh = 78, 78, 1.25
iframe = IFrame(svg(encoded.decode('UTF-8'), width, height) , width=width*fat_wh, height=height*fat_wh)
popup = folium.Popup(iframe, max_width=2650)
folium.vector_layers.Marker(location=[45.464, 9.1915],popup = popup,
icon= folium.Icon(color='beige', icon_color='yellow',icon = 'globe')
).add_to(m)
except (FileNotFoundError, NameError) as error:
print( "no dir given .. ")
folium.vector_layers.Marker(location=[48.86098, 2.33589],popup = 'France',
icon= folium.Icon(color='green', icon_color='orange',icon = 'unchecked')).add_to(m)
folium.map.LayerControl('topleft', collapsed= False).add_to(m)
#Set the zoom to the maximum possible
m.fit_bounds( m.get_bounds())
block_txt = """
<span style="
display: block;
float: left;
height: 16px;
width: 30px;
margin-right: 5px;
margin-left: 0;
border: 1px solid #999;
background:{col};opacity:0.99
<!-- -->
">
{item}
</span>
"""
marker_txt_mk = """<br> <span style="color: {col};">{item}</span> <i class="fa fa-repeat fa-2x" style="color:{col}"></i> </li>"""
# https://fontawesome.com/icons?d=gallery&m=free
marker_txt_rep = """<br> <span style="color: {col};">{item}</span> <i class="glyphicon glyphicon-repeat" style="color:{col}"></i> </li>"""
marker_txt_be = """<br> <span style="color: {col};">{item}</span> <i class="glyphicon glyphicon-tree-deciduous fa-2x" style="color:{col}"></i> </li>"""
# https://getbootstrap.com/docs/3.3/components/#glyphicons
html_itms = marker_txt_rep.format( item= "egg red" , col= "red") \
+ marker_txt_mk.format( item= "egg blue" , col= "blue") \
+ marker_txt_be.format( item= "mark green" , col= "green") \
legend_html = """
<div style="
position: fixed;
top: 114px; left: 119px; width: 15x; height: 110x;
border:1px solid grey;
border-radius: 5px;
z-index:9999;
background-color:white; opacity: .99;
<!-- background-color:rgba(255, 255, 255, 0.99); -->
border-radius:6px;
font-size:13px;
font-weight: bold;
">
{title}
{itm_txt}
</ul>
</div> """.format( title = "Legend html", itm_txt= html_itms)
m.get_root().html.add_child(folium.Element( legend_html ))
m