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提供了MapMask类用来控制地图元素的局部显示与隐藏。并可以针对POI标注、底图、楼块等地图元素
局部显示:只展示指定区域的地图及地图元素(poi标注、底图、楼块等),隐藏掉区域外的地图元素以突出重点。
局部隐藏:隐藏掉局部区域地图元素,比如隐藏掉指定园区范围的地图元素,然后自定义叠加园区模型。
注意:
1、局部隐藏适用于地图大级别情况,建议在zoom>=18级时使用
2、初始地图的中心点需要设置到掩膜区域内
如下面示例所示:

DEMO详情
区域掩膜局部显示
区域掩膜局部隐藏
MapMask类参考

构造函数:

构造函数说明

BMapGL.MapMask(paths, options)

创建地图区域掩膜实例,根据paths参数传入的区域范围进行区域掩膜,options参数控制各个地图元素是否参与掩膜。

参数说明:

构造函数类型说明

path

Array<Point>

区域坐标点数组

options

Object

区域掩膜自定义配置

options属性变量:

options属性类型说明

showRegion

string

展示区域内部还是外部,取值'inside'或'outside',默认为'inside'

isBuildingMask

boolean

楼块是否参与掩膜,默认为false

isMapMask

boolean

底图是否参与掩膜,默认为false

isPoiMask

boolean

底图上的Poi是否参与掩膜,默认为false

使用示例
1. 创建地图参照展示地图
2. 创建区域掩膜实例,实现掩膜效果
// 设置掩膜区域坐标点数组
var path = [
new BMapGL.Point(116.31951444701689, 40.03514188328609),
new BMapGL.Point(116.31914525270483, 40.03627653457813),
new BMapGL.Point(116.31800011574751, 40.03960034324275),
new BMapGL.Point(116.31419172285828, 40.03965310472413),
new BMapGL.Point(116.31601289759325, 40.037228304952336),
new BMapGL.Point(116.31924096994166, 40.03521921152976),
];
// 创建区域掩膜实例
var mapmask = new BMapGL.MapMask(path, {
showRegion: 'inside', // 显示区域范围以内部分
isBuildingMask: true, // 楼块是否参与掩膜
isPoiMask: true, // poi标注是否参与掩膜
isMapMask: true, // 底图是否参与掩膜
});
// 将区域掩膜添加到地图上,实现掩膜效果
map.addOverlay(mapmask);

此外,可以结合地图底图颜色配置、个性化地图、绘线描边等功能实现精细化需求效果。

上一篇

简易行政区划图层

下一篇

像素个性化
本篇文章对您是否有帮助?