如何在一组中添加2个以上的图层?

时间:2011-11-05 08:06:18

标签: javascript openlayers openstreetmap

如何在一个组中添加两个或多个图层,以便我可以在已分类的图层切换器中看到它们,并可以选择或取消全部!?
这是我的代码:

            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);

现在我怎么能用名称“Lines”将这两个结合起来?

2 个答案:

答案 0 :(得分:4)

我认为 GeoExt.tree 就是你想要的。

看到这封邮件:

  

OpenLayers的图层切换器不支持图层层次结构   可能永远不会。我建议检查一下层树   MapFish(http://www.mapfish.org)。 MapFish层树也是   基于OpenLayers或中配置的图层自动配置   通过用户指定的模型配置

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

点击这里: http://trac.osgeo.org/openlayers/browser/sandbox/jachym/openlayers/examples/layer-groups.html?rev=4958它看起来像是支持它的openlayers的旧分支。

让我们来看看: http://api.geoext.org/1.0/examples/tree.html

我认为GeoExt.tree就是你想要的。

答案 1 :(得分:0)

我知道这已经过时了,但如果有人提出同样的问题我会回答。

如果您使用的是ol3-layerswitcher,您可以创建一个包含所有已定义图层的新图层组,以便在组下显示它们。图层组的标题将其与图层分开。

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
});