AI
产品服务
解决方案
文档与支持
定价
更新时间: 2026/03/12 14:33
镂空多边形绘制
简介

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

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);
});

上一篇

带高度的点

下一篇

3D棱柱绘制

本篇文章对您是否有帮助?