how to add 2+ layers in a group?

Question

How can I add two or more layers in a group so that I can see them in layerswitcher categorised and can select or unselect all !?
Here is the code I have:

            var line_1 = new OpenLayers.Layer.Vector(" Line no - 1", {
                    visibility: true,
                    projection: dproj,
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    style: {strokeWidth: 4, strokeColor: "#ff0000", strokeOpacity: 1},
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "lines/en/line_1.kml",
                        format: new OpenLayers.Format.KML
                    })
            });

            var line_2 = new OpenLayers.Layer.Vector(" Line no - 2", {
                    visibility: true,
                    projection: dproj,
                    strategies: [new OpenLayers.Strategy.Fixed()],
                    style: {strokeWidth: 4, strokeColor: "#008000", strokeOpacity: 1},
                    protocol: new OpenLayers.Protocol.HTTP({
                        url: "lines/en/line_2.kml",
                        format: new OpenLayers.Format.KML
                    })
            });
 var layers = [line_1, line_2]
 map.addLayers(layers);

Now how can I gorup these two in 1 with the name "Lines" ?

Answer 1

I think GeoExt.tree is what you want.

See this mail :

OpenLayers' layer switcher does not support layer hierarchy and will probably never do. I'd recommend checking out the layer tree of MapFish (http://www.mapfish.org). MapFish layer tree is either auto-configured based on the layers configured in OpenLayers or configured through a user-specified model

http://www.osgeo.org/pipermail/openlayers-users/2008-June/006358.html

Check out here : http://trac.osgeo.org/openlayers/browser/sandbox/jachym/openlayers/examples/layer-groups.html?rev=4958 it looks like a old branch of openlayers that supports it.

So lets look at this : http://api.geoext.org/1.0/examples/tree.html

I think GeoExt.tree is what you want.

Answer 2

I know this is old but I am answering in case if any one has the same question.

If you are using ol3-layerswitcher you can just create a new layer group with all your defined layers to show them under a group. The title of the layer group separates it from the layers.

var overlay1 = new ol.layer.Tile({
    title: 'Overlay1',
    source: new ol.source.TileWMS({
        url: 'http://localhost:8080/geoserver/WORKSPACE/wms',
        params:{
            'LAYERS': 'Overlay1',
            'TILED': true
        },
        serverType: 'geoserver'
    }),
});

var basemap1 = new ol.layer.Tile({
    title: 'Basemap1',
    type: 'base'
    source: new ol.source.OSM()
});

var basemaps = [basemap1, basemap2 ...]

var overlays = [overlay1, overlay2 ...]

var map = new ol.Map({
    controls: [
        new ol.control.LayerSwitcher({
            tipLabel: 'Layers'
        })
    ],
    target: 'map',
    layers: [
        new ol.layer.Group({
            title: 'Base Maps',
            layers: basemaps
        }),
        new ol.layer.Group({
            title: 'Overlays',
            layers: overlays
        })
    view: view
});