如何使用folium或ipyleaflet在Jupyter中实现SVG图像的缩放平移导航

方案1：直接将SVG作为ImageOverlay源（最简方案，无损画质） #

你原有代码几乎不需要修改，直接把PNG路径替换为你的SVG文件路径即可。Folium的ImageOverlay原生支持矢量SVG源，渲染时会保留完整的矢量特性，放大不会出现像素模糊，也不需要额外存储大体积PNG文件。
示例代码：

def create_tree_map():
    base_map = folium.Map(crs='Simple', zoom_start=1, tiles=None)
    # 直接替换为你的SVG文件路径，也可以传入序列化后的SVG Data URI
    overlay = folium.raster_layers.ImageOverlay(
        image="dag_map.svg",
        bounds=[[0, 0], [500, 500]],
        zindex=1
    )
    overlay.add_to(base_map)
    base_map.fit_bounds(bounds=[[0, 0], [500, 500]])
    base_map.save('test_folium.html')
    return base_map

如果不想生成本地SVG文件，可以将你生成的SVG字符串直接编码为Data URI传入：

import urllib.parse
# 假设svg_str是你生成的SVG原始字符串
svg_data_uri = f"data:image/svg+xml;utf8,{urllib.parse.quote(svg_str)}"
# 后续把image参数替换为svg_data_uri即可

方案2：可交互SVG嵌入方案（支持SVG元素交互） #

如果你后续需要对SVG内部的元素做事件绑定（比如点击某元素展示详情、高亮等操作），可以直接将SVG作为DOM元素注入到Folium的地图容器中，和地图坐标系绑定后，缩放平移操作会同步作用在SVG上，同时可以直接操作SVG的DOM节点：

from folium import Map, Element
def create_interactive_svg_map(svg_str, width=500, height=500):
    base_map = Map(crs='Simple', zoom_start=1, tiles=None)
    # 自定义JS将SVG插入地图容器，绑定坐标变换
    svg_inject_js = f"""
    <script>
    document.addEventListener('DOMContentLoaded', function() {{
        const map = window.{base_map.get_name()};
        const svgElement = document.createRange().createContextualFragment(`{svg_str}`).firstElementChild;
        svgElement.style.position = 'absolute';
        svgElement.style.transformOrigin = 'top left';
        // 绑定地图缩放平移事件，同步更新SVG位置和缩放
        function updateSvgTransform() {{
            const topLeft = map.latLngToContainerPoint([0, 0]);
            const bottomRight = map.latLngToContainerPoint([{height}, {width}]);
            const scaleX = (bottomRight.x - topLeft.x) / {width};
            const scaleY = (bottomRight.y - topLeft.y) / {height};
            svgElement.style.transform = `translate(${{topLeft.x}}px, ${{topLeft.y}}px) scale(${{scaleX}}, ${{scaleY}})`;
        }}
        map.getPane('overlayPane').appendChild(svgElement);
        map.on('move moveend zoom zoomend', updateSvgTransform);
        updateSvgTransform();
    }})
    </script>
    """
    base_map.get_root().html.add_child(Element(svg_inject_js))
    base_map.fit_bounds([[0,0], [height, width]])
    base_map.save('interactive_svg_map.html')
    return base_map

关于瓦片集思路的说明 #

你不需要额外生成瓦片集，SVG本身是矢量格式，本身就支持任意缩放无损渲染，切瓦片反而会增加额外的处理成本，完全没有必要。

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