如何在Folium中基于GeoJSON实现Stamen图层的区域可见控制？

要实现目标GeoJSON区域内部底图清晰、外部呈现模糊/半透明覆盖的效果，核心思路是通过遮罩层挖空或CSS滤镜控制两种方式实现，以下是两种可行的具体方案：

方案1：白色半透明遮罩+挖空目标区域 #

这种方法简单稳定，适合大多数场景。我们先添加一个覆盖全球的白色半透明图层，再通过GeoJSON的样式设置，把目标区域从遮罩中"挖空"，让内部底图正常显示。

代码示例 #

import folium
import json

# 加载目标区域的GeoJSON文件
with open("spain.geojson", "r") as f:
    target_geojson = json.load(f)

# 创建基础地图，中心定位到西班牙
m = folium.Map(location=[40.4637, -3.7492], zoom_start=6, tiles="Stamen Terrain")

# 添加覆盖全地图的白色半透明遮罩
folium.Rectangle(
    bounds=[[-90, -180], [90, 180]],  # 覆盖全球经纬度范围
    color=None,
    fill_color="white",
    fill_opacity=0.7,  # 调整透明度，0为完全透明，1为完全不透明
    zindex=1  # 遮罩层层级低于目标区域
).add_to(m)

# 添加目标GeoJSON，设置样式实现挖空效果
folium.GeoJson(
    target_geojson,
    style_function=lambda x: {
        "fillColor": "transparent",
        "color": "black",  # 可选：给目标区域添加边框
        "weight": 2,
        "fillOpacity": 0,
        "fillRule": "evenodd"  # 确保复杂多边形的挖空逻辑正确
    },
    zindex=2  # 目标区域层级高于遮罩，保证挖空显示
).add_to(m)

# 保存生成的地图
m.save("spain_masked_map.html")

方案2：外部区域模糊处理（CSS+自定义图层） #

如果需要外部区域呈现模糊效果而非白色覆盖，可以通过自定义CSS和SVG裁剪路径实现，让底图在目标区域外模糊，内部保持清晰。

代码示例 #

import folium
import json

with open("spain.geojson", "r") as f:
    target_geojson = json.load(f)

# 创建基础地图
m = folium.Map(location=[40.4637, -3.7492], zoom_start=6, tiles="Stamen Terrain")

# 添加自定义CSS，控制底图的模糊效果和裁剪范围
custom_css = """
/* 给Stamen底图添加模糊滤镜 */
.leaflet-tile-container {
    filter: blur(3px);  /* 调整模糊程度，数值越大越模糊 */
}

/* 让目标区域内的底图取消模糊 */
#target-region ~ .leaflet-tile-container {
    filter: none;
    clip-path: url(#target-clip);
}
"""
folium.Element(f"<style>{custom_css}</style>").add_to(m.get_root())

# 添加目标GeoJSON，指定ID用于CSS选择
folium.GeoJson(
    target_geojson,
    style_function=lambda x: {
        "fillColor": "transparent",
        "color": "black",
        "weight": 2,
        "fillOpacity": 0
    },
    name="target-region",
    overlay=True,
    id="target-region"
).add_to(m)

# 添加SVG裁剪路径，确保模糊仅作用于目标区域外
custom_svg = """
<svg style="display:none;">
    <clipPath id="target-clip">
        <use href="#target-region" />
    </clipPath>
</svg>
"""
folium.Element(custom_svg).add_to(m.get_root())

# 保存地图
m.save("spain_blurred_map.html")

注意事项 #

• 方案1兼容性更好，无需依赖CSS特性，适合所有浏览器
• 方案2的模糊效果依赖浏览器对filter和clip-path属性的支持，部分旧浏览器可能无法正常显示
• 确保GeoJSON文件的坐标格式正确（WGS84，即经纬度），否则会出现区域匹配错误
• 可以通过调整zindex值控制图层层级，保证目标区域始终在遮罩/模糊层之上

内容的提问来源于stack exchange，提问作者Juan Carlos Gonzalez Quesada