加载GeoJSON时按缩放级别切换Mapbox区域/区县图层

一、R中格式化GeoJSON：合并区县为Pcode区域 #

要实现低缩放层级显示Pcode标识的区域，必须将同一Pcode下的所有区县多边形合并为单个区域多边形，生成独立的GeoJSON文件。具体用sf包实现：

1. 安装并加载依赖包：

install.packages(c("sf", "dplyr"))
library(sf)
library(dplyr)

2. 加载原始区县GeoJSON并按Pcode聚合：

# 读取原始区县数据
districts <- st_read("https://raw.githubusercontent.com/Laurent-Smeets-GSS-Account/geojsons/main/geojsons_files/Districts_261_simplified.json")

# 按Pcode分组合并多边形，保留Pcode属性
regions <- districts %>%
  group_by(Pcode) %>%
  summarize(geometry = st_union(geometry)) %>%
  ungroup()

# 保存为区域GeoJSON文件
st_write(regions, "regions_by_pcode.geojson", driver = "GeoJSON")

二、Mapbox中实现缩放层级切换图层 #

通过监听地图缩放事件，切换区域图层（低缩放）和区县图层（高缩放）的可见性，核心代码如下：

mapboxgl.accessToken = '你的Mapbox Token';
const map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v12',
    // 根据你的数据调整中心坐标和初始缩放
    center: [你的经度, 你的纬度],
    zoom: 5
});

map.on('load', () => {
    // 添加区域图层源（Pcode聚合后的GeoJSON）
    map.addSource('regions', {
        type: 'geojson',
        data: 'regions_by_pcode.geojson' // 替换为你的区域GeoJSON路径
    });

    // 添加区县图层源（原始GeoJSON）
    map.addSource('districts', {
        type: 'geojson',
        data: 'https://raw.githubusercontent.com/Laurent-Smeets-GSS-Account/geojsons/main/geojsons_files/Districts_261_simplified.json'
    });

    // 添加区域填充图层（初始可见）
    map.addLayer({
        id: 'regions-layer',
        type: 'fill',
        source: 'regions',
        paint: {
            'fill-color': 'rgba(100, 150, 240, 0.4)',
            'fill-outline-color': 'rgba(100, 150, 240, 1)'
        }
    });

    // 添加区县填充图层（初始隐藏）
    map.addLayer({
        id: 'districts-layer',
        type: 'fill',
        source: 'districts',
        paint: {
            'fill-color': 'rgba(200, 100, 240, 0.4)',
            'fill-outline-color': 'rgba(200, 100, 240, 1)'
        },
        layout: {
            visibility: 'none'
        }
    });

    // 区域图层点击事件：显示Pcode
    map.on('click', 'regions-layer', (e) => {
        new mapboxgl.Popup()
            .setLngLat(e.lngLat)
            .setHTML(`区域Pcode: ${e.features[0].properties.Pcode}`)
            .addTo(map);
    });

    // 区县图层点击事件：显示Name
    map.on('click', 'districts-layer', (e) => {
        new mapboxgl.Popup()
            .setLngLat(e.lngLat)
            .setHTML(`区县名称: ${e.features[0].properties.Name}`)
            .addTo(map);
    });

    // 鼠标样式切换
    ['regions-layer', 'districts-layer'].forEach(layerId => {
        map.on('mouseenter', layerId, () => {
            map.getCanvas().style.cursor = 'pointer';
        });
        map.on('mouseleave', layerId, () => {
            map.getCanvas().style.cursor = '';
        });
    });

    // 监听缩放事件，切换图层可见性
    map.on('zoomend', () => {
        const currentZoom = map.getZoom();
        // 设定缩放阈值，比如zoom >=8时显示区县，否则显示区域
        if (currentZoom >= 8) {
            map.setLayoutProperty('regions-layer', 'visibility', 'none');
            map.setLayoutProperty('districts-layer', 'visibility', 'visible');
        } else {
            map.setLayoutProperty('regions-layer', 'visibility', 'visible');
            map.setLayoutProperty('districts-layer', 'visibility', 'none');
        }
    });
});

关键说明 #

• 缩放阈值可根据你的数据范围调整（比如8只是示例，可改为更适合的数值）
• 若要优先使用单个GeoJSON源，可在Mapbox中使用矢量瓦片预处理数据（将区域和区县层级打包为矢量瓦片），但预处理复杂度更高，建议用双GeoJSON源实现更简单
• 确保regions_by_pcode.geojson文件可被Mapbox访问（可上传到静态文件托管服务）

内容的提问来源于stack exchange，提问作者L Smeets