WebGIS开发利用Openlayers实现图层组控制

本文示例需要使用 【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

代码块：

    
    
    
    
    
    

    

    



    

    
    

        

            

                天地图
                

                    可见

                    透明度:
                
            
            

                组图层
                

                    可见

                    透明度:
                
                

                    

                        mapbox TileJson
                        

                            可见

                            透明度:
                        
                    
                    

                        天地图注记图层
                        

                            可见

                            透明度: