AI
产品服务
解决方案
文档与支持
定价
更新时间: 2026/03/19 17:04
掩膜
简介

在地图可视化中,经常需要对地图进行局部显示或隐藏。基于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);

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

上一篇

简易行政区划图层

下一篇

像素个性化

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