浏览器版本低!无法浏览完整内容,建议升级或更换浏览器。
(以“{{jspopularGL-sidebar}} <div class="h1-title">掩膜</div><div id="update-time">更新时间:2022年6月6日</div><div class="bluetitle"><div class="services-title...”为内容创建页面)
 
第1行: 第1行:
 
{{jspopularGL-sidebar}}
 
{{jspopularGL-sidebar}}
 
<div class="h1-title">掩膜</div><div id="update-time">更新时间:2022年6月6日</div><div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text" style="margin-bottom: 0px;">在地图可视化中,经常需要对地图进行局部显示或隐藏。基于WebGL的模板检测,百度地图JSAPI GL提供了MapMask类用来控制地图元素的局部显示与隐藏。并可以针对POI标注、底图、楼块
 
<div class="h1-title">掩膜</div><div id="update-time">更新时间:2022年6月6日</div><div class="bluetitle"><div class="services-title-text">简介</div></div><div class="serve-explain-text" style="margin-bottom: 0px;">在地图可视化中,经常需要对地图进行局部显示或隐藏。基于WebGL的模板检测,百度地图JSAPI GL提供了MapMask类用来控制地图元素的局部显示与隐藏。并可以针对POI标注、底图、楼块
<span>*</span>局部显示:只展示指定区域的地图及地图元素(poi标注、底图、楼块等),隐藏掉区域外的地图元素以突出重点。<br/>
+
<span>*</span>局部显示:只展示指定区域的地图及地图元素(poi标注、底图、楼块等),隐藏掉区域外的地图元素以突出重点。<br/><span>*</span>局部隐藏:隐藏掉局部区域地图元素,比如隐藏掉指定园区范围的地图元素,然后自定义叠加园区模型。<br/><span style="color:#f5533d;">注意:<br/>1、局部隐藏适用于地图大级别情况,建议在zoom>=18级时使用<br/>2、初始地图的中心点需要设置到掩膜区域内</span><br/>如下面示例所示:
<span>*</span>局部隐藏:隐藏掉局部区域地图元素,比如隐藏掉指定园区范围的地图元素,然后自定义叠加园区模型。<br/>
+
</div><!--jsapi单独demo-代码--><div class="jsapidemo_template"><div class="demo_area"><div dir="https://lbsyun.baidu.com/jsdemo/demo/amapmask2.htm"></div></div><div class="demo_control"><div class="demo_btn" style="width:50%;">[https://lbsyun.baidu.com/jsdemo/demo/amapmask2.htm 区域掩膜局部显示]</div><div class="demo_btn" style="width:485px;">[https://lbsyun.baidu.com/jsdemo/demo/amapmask1.htm 区域掩膜局部隐藏]</div></div><div class="jsapi-demo-link">[http://lbsyun.baidu.com/jsdemo.htm#amapmask1 DEMO详情]</div></div><div class="bluetitle"><div class="services-title-text">MapMask类参考</div></div><div class="serve-explain-text">
<span style="color:#f5533d;">(注意:局部隐藏适用于地图大级别情况,建议在zoom>=18级时使用)</span><br/>
+
如下面示例所示:
+
</div>
+
<!--jsapi单独demo-代码--><div class="jsapidemo_template"><div class="demo_area"><div dir="https://lbsyun.baidu.com/jsdemo/demo/amapmask2.htm"></div></div><div class="demo_control"><div class="demo_btn" style="width:50%;">[https://lbsyun.baidu.com/jsdemo/demo/amapmask2.htm 区域掩膜局部显示]</div><div class="demo_btn" style="width:485px;">[https://lbsyun.baidu.com/jsdemo/demo/amapmask1.htm 区域掩膜局部隐藏]</div></div><div class="jsapi-demo-link">[http://lbsyun.baidu.com/jsdemo.htm#amapmask1 DEMO详情]</div></div><div class="bluetitle"><div class="services-title-text">MapMask类参考</div></div><div class="serve-explain-text">
+
 
构造函数:
 
构造函数:
 
</div>
 
</div>
第27行: 第23行:
 
|-
 
|-
 
| path
 
| path
| Array<Point>
+
| Array&lt;Point&gt;
 
| 区域坐标点数组
 
| 区域坐标点数组
 
|-
 
|-

2022年6月30日 (四) 17:35的版本

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

  • 文档水平很差

  • 文档水平一般

  • 文档不错

  • 文档写的很好

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

提交反馈

拖动标注工具

添加矩形标注

添加箭头标注

完成

取消