掩膜

更新时间：2022年6月6日

简介

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

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