如何用Leaflet仅展示单个国家并使其适配笔记本电脑屏幕？

修复后的完整代码 #

// 初始化地图，不固定中心和缩放，让fitBounds自动适配
var map = L.map('map').setView([0, 0], 1);

$.getJSON('https://cdn.jsdelivr.net/gh/johan/world.geo.json@34c96bba/countries/TZA.geo.json').then(function (geoJSON) {
    // 加载OSM底图
    var osm = L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    // 创建坦桑尼亚图层并添加到地图（必须添加，不然getBounds拿不到正确范围）
    var tzLayer = L.geoJSON(geoJSON, {
        style: {
            fillColor: '#88cc88',
            weight: 2,
            color: '#333'
        }
    }).addTo(map);

    // 适配屏幕，加内边距避免国家边缘贴死屏幕，限制最大缩放防止过度放大
    map.fitBounds(tzLayer.getBounds(), {
        padding: [50, 50],
        maxZoom: 8
    });

    // 遮罩层：把坦桑尼亚以外的区域盖住，实现仅显示目标国家
    var globalMask = L.geoJSON({
        type: 'Polygon',
        coordinates: [[[-180, 90], [-180, -90], [180, -90], [180, 90], [-180, 90]]]
    }, {
        style: {
            fillColor: '#000',
            fillOpacity: 0.7,
            weight: 0
        }
    }).addTo(map);

    // 用坦桑尼亚的边界裁剪遮罩层，只露出该国区域
    globalMask.setStyle({ mask: tzLayer });
});

核心修复点 #

• 地图初始化要正确：别固定中心和缩放，只设一个最小缩放级别，让fitBounds自动计算合适的视图
• 必须把坦桑尼亚图层添加到地图：原代码里tzLayer没加进地图，getBounds会拿不到有效范围，导致fitBounds失效
• 添加内边距适配屏幕：padding参数能给国家边界和屏幕边缘留缓冲，不会让内容贴死在屏幕边上
• 限制最大缩放：防止用户放大后国家超出屏幕范围
• 遮罩层实现仅显示目标国：如果需要完全隐藏其他国家，用全球遮罩+裁剪的方式，只露出坦桑尼亚

页面样式要求 #

确保你的HTML里有一个id为map的元素，并且设置了全屏样式：

#map {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
}

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