Folium地图如何按缩放级别控制标记显隐解决重叠问题

之前自定义JS不生效的原因 #

• 代码里引用的map、all_testptLayer变量和Folium实际生成页面的全局变量不匹配，没有正确拿到地图实例和标记图层
• 逻辑只做了图标大小切换，没有做显隐控制，无法从根源解决重叠
• 代码存在语法错误：分支判断里漏写layer.前缀，直接调用feature.properties会直接报错中断执行

实现逻辑 #

• 先给所有地理标记按显示优先级分档：以示例的美国州数据为例，按地理单元面积从大到小排序分3档，面积越大的标记在越低的缩放层级下优先显示，面积小的标记仅在高缩放层级显示
• 不同档位的标记放到独立的图层组中，通过JS监听地图缩放事件，根据当前缩放值控制对应图层组的添加/移除，彻底避免标记重叠
• 该逻辑可直接复用到安大略省选区渲染场景，只需要把分档规则从面积换成选区等级、业务优先级即可

可直接运行的完整代码 #

import dload
from shapely.geometry import shape
import geopandas as gpd
import pandas as pd
import folium
from folium import FeatureGroup

json_string = 'https://raw.githubusercontent.com/datasets/geo-admin1-us/master/data/admin1-us.geojson'
j = dload.json(json_string)
gdf_usa = gpd.GeoDataFrame.from_features(j["features"])
gdf_usa_new = gpd.GeoDataFrame(gdf_usa, crs="EPSG:4326", geometry='geometry')

# 初始化底图
usa_map = gdf_usa_new.explore(tiles='CartoDB positron', zoom_start=4)

# 计算几何质心用于标记定位
gdf_usa_new["long"] = gdf_usa_new.to_crs(epsg='4326').centroid.map(lambda p: p.x)
gdf_usa_new["lat"] = gdf_usa_new.to_crs(epsg='4326').centroid.map(lambda p: p.y)
# 转投影坐标系计算真实面积，用于标记显示优先级分档
gdf_usa_new['area_sqkm'] = gdf_usa_new.to_crs(epsg=3857).area / 1e6
# 按面积从大到小排序，分3个显示档位
gdf_usa_new = gdf_usa_new.sort_values('area_sqkm', ascending=False).reset_index(drop=True)
total_count = len(gdf_usa_new)
gdf_usa_new['zoom_tier'] = [
    1 if i < total_count//3 
    else 2 if i < 2*total_count//3 
    else 3 
    for i in range(total_count)
]

# 为每个档位创建独立图层组
tier1_layer = FeatureGroup(name='tier1_markers', show=True)
tier2_layer = FeatureGroup(name='tier2_markers', show=False)
tier3_layer = FeatureGroup(name='tier3_markers', show=False)
tier1_layer.add_to(usa_map)
tier2_layer.add_to(usa_map)
tier3_layer.add_to(usa_map)

# 按档位添加标记到对应图层
for i in range(len(gdf_usa_new)):
    row = gdf_usa_new.iloc[i]
    target_layer = tier1_layer if row['zoom_tier'] == 1 else tier2_layer if row['zoom_tier'] ==2 else tier3_layer
    folium.Marker(
        location=[row['lat'], row['long']],
        popup=row['name'],
        icon=folium.DivIcon(
            html=f"""<div style="font-family: 'Microsoft Yahei', sans-serif; color: #222; font-weight: 500; text-shadow: 1px 1px 2px #fff, -1px -1px 2px #fff;">{row['name']}</div>"""
        )
    ).add_to(target_layer)

# 注入缩放控制JS
usa_map.get_root().html.add_child(folium.Element("""
<script>
window.addEventListener('load', function() {
    // 自动获取Folium生成的Leaflet地图实例
    const mapInstance = Object.values(window).find(item => item instanceof L.Map);
    if (!mapInstance) return;
    // 获取三个标记图层
    const layers = Object.values(mapInstance._layers);
    const t1 = layers.find(l => l.options?.name === 'tier1_markers');
    const t2 = layers.find(l => l.options?.name === 'tier2_markers');
    const t3 = layers.find(l => l.options?.name === 'tier3_markers');

    // 按缩放层级更新标记显隐
    function refreshMarkerDisplay() {
        const zoom = mapInstance.getZoom();
        // 缩放阈值可根据实际显示效果自行调整
        if (zoom < 4) {
            t1 && mapInstance.addLayer(t1);
            t2 && mapInstance.removeLayer(t2);
            t3 && mapInstance.removeLayer(t3);
        } else if (zoom < 6) {
            t1 && mapInstance.addLayer(t1);
            t2 && mapInstance.addLayer(t2);
            t3 && mapInstance.removeLayer(t3);
        } else {
            t1 && mapInstance.addLayer(t1);
            t2 && mapInstance.addLayer(t2);
            t3 && mapInstance.addLayer(t3);
        }
    }

    // 初始化执行一次，适配初始缩放层级
    refreshMarkerDisplay();
    // 绑定缩放事件监听
    mapInstance.on('zoomend', refreshMarkerDisplay);
})
</script>
"""))

# 渲染/保存地图
usa_map

参数调整说明 #

• 缩放阈值可自行修改：代码中默认zoom<4仅显示第一档大区域标记，4≤zoom<6显示前两档，zoom≥6显示全部标记，可根据实际视觉效果调整数值
• 分档规则可自定义：业务场景渲染安大略省选区时，不需要按面积分档，可替换为选区行政等级、业务优先级等规则给zoom_tier字段赋值即可
• 标记样式可调整：DivIcon中的style参数可自行修改字体、颜色、大小，适配底图风格
• 如果需要更精细的显隐控制，可新增更多档位的图层组，对应新增缩放判断分支即可，逻辑完全一致

内容的提问来源于stack exchange，提问作者Isaac A