本文介绍如何使用OpenLayers库实现地图图层的透明度调整及可见性控制。通过setOpacity()和setVisible()方法，用户可以自由调节不同图层的显示效果。
本文示例需要使用 【include-openlayers-local.js】 开发库实现图层组控制功能。通过 layer 对象的 setOpacity()方法设置图层透明度以及 setVisible()方法设置图层是否可见。
具体效果如下图所示：
实现步骤
1. 引用开发库:
本示例通过本地离线 【include-openlayers-local.js】 脚本引入开发库;
2. 创建地图容器:
创建id="mapCon"的 div 作为地图容器，并设置其样式;
3. 创建地图对象:
创建地图对象，设置地图的必要参数,将 layers 属性设置为天地图矢量图层、天地图注记图层以及 ;mapbox TileJson 图层
4. 设置图层透明度:
创建图层组控制控件，通过 layer 对象的 setOpacity()方法设置图层透明度;
layer.setOpacity(parseFloat(this.value)Step 5. 设置图层是否可见:
通过 layer 对象的 setVisible()方法设置图层是否可见。
layer.setVisible(this.checked)关键接口
1.【图层基类】ol.layer.Layer
【method】setVisible(visible)：设置图层的可见性
| 参数名 |
类型 |
说明 |
| visible |
boolean |
图层的可见性 |
详细信息见 OpenLayers API
【method】setOpacity(opacity)：设置图层的可见性
| 参数名 |
类型 |
说明 |
| opacity |
number |
图层的透明度(0-1) |
详细信息见 OpenLayers API
代码块：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www
最低0.47元/天 解锁文章
扫一扫
2903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
