如何在选择之前让 OpenLayers 中的默认图层不可见？答案

【问题标题】：How to have default layers in OpenLayers not visible until selected?如何在选择之前让 OpenLayers 中的默认图层不可见？
【发布时间】：2016-02-18 17:27:42
【问题描述】：

我是 OpenLayers 的新手，正在使用 OpenStreetMap 做一个项目。当我打开项目时，我当前拥有的图层已经可见并且彼此重叠。

我想让我的图层在它们的复选框被选中之前不显示在地图上（默认情况下不选中它们），但我似乎无法弄清楚这是如何完成的。

如果有帮助，我可以提供代码。

【问题讨论】：

是的，请发布您当前拥有的代码并解释您遇到的具体问题。
你为什么在这个问题上使用leaflet标签？

标签： openlayers openstreetmap

【解决方案1】：

也许你认为在 OL3 中不存在的 layerswitcher 控件，但在 OL2 中非常有用。

您可以在 OL3 中使用 Matt Walker 的控件。请按照以下步骤操作：

从https://github.com/walkermatt/ol3-layerswitcher下载
将其放在应用程序的同一文件夹中
所有图层都必须是 Title 属性，并且必须在使用 ol.layer.Group 的组内。您可以创建不同的组并在默认图层中设置属性 visible = true（其他为 false）。

例子：

<html><head><link rel="stylesheet" href="http://openlayers.org/en/v3.2.0/css/ol.css" type="text/css">
<script src="http://openlayers.org/en/v3.13.0/build/ol.js" type="text/javascript"></script>
<link rel="stylesheet" href="ol3-layerswitcher-master/src/ol3-layerswitcher.css" type="text/css"/>
<script src="ol3-layerswitcher-master/src/ol3-layerswitcher.js"></script>

<style>
   #map{
    position: absolute;
    width: 100%;
    height: 75%;
  } 
</style>
</head>
<body>
  <h1> ol3-layerswitcher</h1>
  <div id="map"></div>
  <script>
        var map = new ol.Map({
            layers: 
                [new ol.layer.Group({
                    'title': 'Base maps',
                    layers: [
                        new ol.layer.Tile({
                            title: 'Water color',
                            type: 'base',
                            visible: false,
                            source: new ol.source.Stamen({
                                layer: 'watercolor'
                            })
                        }),
                        new ol.layer.Tile({
                            title: 'OSM',
                            type: 'base',
                            visible: false,
                            source: new ol.source.OSM()
                        }),
                        new ol.layer.Tile({
                            title: 'Satellite',
                            type: 'base',
                            visible: true,
                            source: new ol.source.MapQuest({layer: 'sat'})
                        })
                    ]
                }),
                new ol.layer.Group({
                    title: 'Overlays',
                    layers: [
                        new ol.layer.Tile({
                            title: 'Countries',
                            source: new ol.source.TileWMS({
                                url: 'http://demo.opengeo.org/geoserver/wms',
                                params: {'LAYERS': 'ne:ne_10m_admin_1_states_provinces_lines_shp'},
                                serverType: 'geoserver'
                            })
                        })
                    ]
                })
                ],  
                target: 'map',
                view: new ol.View({
                    center: ol.proj.transform([2.1, 41.50], 'EPSG:4326', 'EPSG:3857'),
                    zoom: 8
          })
        });

        var layerSwitcher = new ol.control.LayerSwitcher({
            tipLabel: 'Leyenda'
        });
        map.addControl(layerSwitcher);
        layerSwitcher.showPanel();
  </script></body></html>

另一个网上例子：http://rawgit.com/walkermatt/ol3-layerswitcher/master/examples/layerswitcher.html

希望对你有帮助！

【讨论】：