AI 地图
产品服务
解决方案
文档与支持
定价
更新时间: 2026/07/27 10:37
您当前查看的是 JSAPI GL 历史版本文档。该版本仅用于维护现有项目,不建议用于新项目开发。新项目请使用 JSAPI 4.0,如需升级现有项目,请参考升级指南
You are viewing the legacy JSAPI GL documentation. This version is maintained for existing projects only and is not recommended for new development. For new projects, use the JSAPI 4.0 documentation. If you are upgrading an existing project, please refer to the Migration Guide.
镂空多边形绘制
简介

镂空面绘制基于 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棱柱绘制
本篇文章对您是否有帮助?