通过setVisible控制显示于隐藏

    1. <body>
    2.     <div id="map_container">
    3.         <button onclick="showVec()">显示矢量图</button>
    4.         <button onclick="showImg()">显示影像图</button>
    5.     </div>
    6.     <script>
    7.         /* 一、渲染地图 */
    8.         const map = new ol.Map({
    9.             target: 'map_container',
    10.             layers: [TianDiMap_vec, TianDiMap_cva, TianDiMap_img, TianDiMap_cia],
    11.             view: new ol.View({
    12.                 projection: 'EPSG:4326', // 经纬度坐标系(默认是默卡托坐标系)
    13.                 center: [110, 30],
    14.                 zoom: 4,
    15.             })
    16.         })
    18.         var layers = map.getLayers().array_;
    19.         console.log(layers)
    20.         function showVec(){
    21.            layers.forEach((item,index)=>{
    22.                if(index<2){
    23.                    item.setVisible(true)
    24.                }else{
    25.                    item.setVisible(false)
    26.                }
    27.            })
    28.         }
    29.         function showImg(){
    30.             layers.forEach((item,index)=>{
    31.                if(index<2){
    32.                    item.setVisible(false)
    33.                }else{
    34.                    item.setVisible(true)
    35.                }
    36.            })
    37.         }
    38.     </script>
    39. </body>