Question

我正在尝试获取一个.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')

Answer 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)

Answer 2

就像您可以在“将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> &nbsp; <span style="color: {col};">{item}</span> &nbsp; <i class="fa fa-repeat fa-2x" style="color:{col}"></i> </li>"""
# https://fontawesome.com/icons?d=gallery&m=free
marker_txt_rep = """<br> &nbsp; <span style="color: {col};">{item}</span> &nbsp; <i class="glyphicon glyphicon-repeat" style="color:{col}"></i> </li>"""
marker_txt_be  = """<br> &nbsp; <span style="color: {col};">{item}</span> &nbsp; <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;

     ">
     &nbsp; {title} 

     {itm_txt}
     </ul>
     </div> """.format( title = "Legend html", itm_txt= html_itms)
m.get_root().html.add_child(folium.Element( legend_html ))

m

结果：

在Folium Marker弹出窗口上显示图像

2 个答案: