《Leaflet 进阶知识点》- L.polygon 多边形绘制详解

最新推荐文章于 2025-03-04 18:31:00 发布

AvatarGiser

最新推荐文章于 2025-03-04 18:31:00 发布

阅读量5.2k

点赞数 4

分类专栏： Leaflet 进阶知识点文章标签： leaflet polygon

本文链接：https://blog.youkuaiyun.com/sinat_31213021/article/details/119612744

版权

Leaflet 进阶知识点专栏收录该内容

7 篇文章

订阅专栏

这篇博客详细介绍了如何使用地图API创建不同类型的多边形，包括单个简单多边形、带孔多边形以及多个多边形的组合。通过示例代码展示了如何定义多边形的坐标，并利用红色显示在地图上，同时调整地图视图以适应多边形的范围。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例

1. 单个简单多边形

// 坐标点多边形（二维数组），注意 第一个 与 最后一个点无需一样，会自动闭合
var latlngs = [
    [31.537628173828125,121.190185546875],
    [30.878448486328125,121.19430541992188],
    [30.839996337890625,121.92901611328125],
    [31.348114013671875,121.8878173828125]
];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// 跳到多边形的范围
map.fitBounds(polygon.getBounds());

2. 单个多边形，且有孔

// 坐标点多边形（三维数组），第一个数组是多边形外围，之后是全部是孔
var latlngs = [
    [// 多边形外围
        [31.537628173828125,121.190185546875],
        [30.878448486328125,121.19430541992188],
        [30.839996337890625,121.92901611328125],
        [31.348114013671875,121.8878173828125]
    ],
    [// 第 1 个孔
        [31.4566,121.2671],
        [31.3481,121.2382],
        [31.3934,121.3659]
    ],
    [// 第 2 个孔
        [31.1174,121.5637],
        [30.9828,121.5348],
        [30.9786,121.6708],
        [31.1036,121.7738]
    ]
];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// 跳到多边形的范围
map.fitBounds(polygon.getBounds());

3. 多个多边形，可有孔或无孔

// 坐标点多边形（四维数组）
var latlngs = [
    [// 第 1 个多边形
        [// 多边形外围
            [31.537628173828125,121.190185546875],
            [30.878448486328125,121.19430541992188],
            [30.839996337890625,121.92901611328125],
            [31.348114013671875,121.8878173828125]
        ],
        [// 第 1 个孔
            [31.4566,121.2671],
            [31.3481,121.2382],
            [31.3934,121.3659]
        ],
        [// 第 2 个孔
            [31.1174,121.5637],
            [30.9828,121.5348],
            [30.9786,121.6708],
            [31.1036,121.7738]
        ]
    ],
    [// 第 2 个多边形
        [// 仅有一个无孔的多边形
            [30.8084,120.5419],
            [30.4183,120.1821],
            [30.3287,121.1654],
        ]
    ],
    [// 第 3 个多边形
        [// 多边形外围
            [31.4841,119.8965],
            [31.5032,120.6326],
            [31.1215,120.5776],
            [30.9677,119.9981]
        ],
        [// 第 1 个孔
            [31.2781,120.1107],
            [31.1161,120.0971],
            [31.1489,120.3717]
        ]
    ]
];
var polygon = L.polygon(latlngs, {color: 'red'}).addTo(map);
// 跳到多边形的范围
map.fitBounds(polygon.getBounds());