浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。

文档全面上新

更科技的视觉体验,更高效的页面结构,快前往体验吧!

体验新版
掩膜
更新时间:2022年6月6日
简介
在地图可视化中,经常需要对地图进行局部显示或隐藏。基于WebGL的模板检测,百度地图JSAPI GL提供了MapMask类用来控制地图元素的局部显示与隐藏。并可以针对POI标注、底图、楼块

*局部显示:只展示指定区域的地图及地图元素(poi标注、底图、楼块等),隐藏掉区域外的地图元素以突出重点。
*局部隐藏:隐藏掉局部区域地图元素,比如隐藏掉指定园区范围的地图元素,然后自定义叠加园区模型。
注意:
1、局部隐藏适用于地图大级别情况,建议在zoom>=18级时使用
2、初始地图的中心点需要设置到掩膜区域内

如下面示例所示:

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);
此外,可以结合地图底图颜色配置、个性化地图、绘线描边等功能实现精细化需求效果。
  • 文档根本没法用

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

如发现文档错误,或对此文档有更好的建议,请在下方反馈。问题咨询请前往反馈平台提交工单咨询。

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消