如何用最新版Leaflet实现地图多边形区域保留、其余区域半黑遮盖？

要实现保留指定多边形区域、其余部分用半透明黑色遮盖的效果，核心思路是利用Leaflet的多边形孔洞特性：创建一个覆盖整个地图范围的大多边形，将需要保留的区域作为孔洞挖除，大多边形的填充色即为半透明遮盖层。以下是适配最新版Leaflet的实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Leaflet Polygon in City of London</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
    <style>
        #map { height: 600px; }
    </style>
</head>
<body>

    <div id="map"></div>

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([51.5074, -0.1278], 13); // City of London (latitude, longitude)

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        // 需要保留的多边形坐标
        var polygonCoords = [
            [51.5174, -0.1349], // top-left
            [51.5115, -0.1225], // top-right
            [51.5053, -0.1281], // bottom-right
            [51.5093, -0.1406], // bottom-left
            [51.5174, -0.1349]  // close the polygon (same as top-left)
        ];

        // 覆盖全球范围的大多边形坐标（外层）
        var worldBounds = [
            [90, 180], [-90, 180], [-90, -180], [90, -180], [90, 180]
        ];

        // 创建带孔洞的遮盖多边形：外层是全球范围，内层孔洞是需要保留的区域
        // 注意：孔洞的坐标顺序需与外层相反（外层顺时针，孔洞逆时针，反之亦然）
        var maskPolygon = L.polygon([worldBounds, polygonCoords.reverse()], {
            color: 'transparent', // 隐藏边框
            fillColor: '#000000', // 黑色填充
            fillOpacity: 0.9      // 90%不透明度，可按需调整
        }).addTo(map);

        // 可选：添加原多边形的边框，方便查看保留区域
        L.polygon(polygonCoords, {
            color: 'blue',
            fill: false // 不填充，只显示边框
        }).addTo(map);
    </script>
</body>
</html>

关键说明 #

• 多边形孔洞规则：Leaflet通过坐标顺序区分外层多边形和孔洞，外层与孔洞的坐标方向（顺时针/逆时针）必须相反，否则无法正确生成孔洞效果，代码中使用polygonCoords.reverse()反转了孔洞的坐标顺序。
• 遮盖层参数：fillOpacity可根据需求调整，0.9对应90%不透明度，数值越小遮盖越浅。
• 边框控制：遮盖多边形设置color: 'transparent'隐藏边框，若需要显示保留区域的边框，可单独添加一个无填充的多边形。

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