镂空多边形绘制

更新时间：2025-08-04

简介

镂空面绘制基于WebGL的模板取反处理，JSAPI GL提供的Polygon类提供镂空面绘制功能。
当个传入的两个区域路径，一个区域位于另一个区域内部，则这个区域不会被绘制出来，从而实现”洞“的效果。

DEMO详情

Polygon类参考

构造函数：

构造函数	说明
BMapGL.Polygon(points:Array< Point >, options)	创建多边形覆盖物

参数说明：

构造函数	类型	说明
points	Array< Point >	点坐标数组
options	Object	多边形样式自定义配置，可选

options属性变量：

options属性	类型	说明
strokeColor	string	边线颜色
fillColor	string	填充颜色。当参数为空时，折线覆盖物没有填充效果。
strokeWeight	number	边线宽度，以像素为单位
strokeOpacity	number	边线透明度，取值范围0-1
fillOpacity	number	填充透明度
strokeStyle	string	边线样式，solid或dashed

使用示例

1创建地图参照展示地图

2创建镂空多边形，并添加到地图上

镂空面绘制使BMapGL.Polygon类，第一个参数路径数组如果传入的是有相交的区域，则不绘制出来，实现“洞”的效果。
如下例顺义区轮廓线存在相交区域，则内部区域镂空处理。

    var bd = new BMapGL.Boundary();
    bd.get('顺义区', function (rs) {
        // console.log('外轮廓：', rs.boundaries[0])
        // console.log('内镂空：', rs.boundaries[1])
        var hole = new BMapGL.Polygon(rs.boundaries, {
            fillColor: 'blue',
            fillOpacity: 0.2
        });
        map.addOverlay(hole);
    });