[GIS] addLayer with switchLayer in OpenLayers 3

javascriptopenlayers

I found this example for switching layers in OpenLayers 3.

function switchLayer()
 {
  var checkedLayer = $('#layerswitcher input[name=layer]:checked').val();
  for (i = 0, ii = layers.length; i < ii; ++i) layers[i].setVisible(i==checkedLayer);
 }

$(function() { switchLayer() } );
$("#layerswitcher input[name=layer]").change(function() { switchLayer() } );

var layers = [];
layers[0] = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) });
layers[1] = new ol.layer.Group({ layers: [ new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }), new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'hyb'}) }) ] });
layers[2] = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'osm'}) });
layers[3] = new ol.layer.Tile({ source: new ol.source.OSM() });

var map = new ol.Map({
  target: 'map',
  controls: ol.control.defaults().extend([ new ol.control.ScaleLine({ units:'metric' }) ]),
  layers: layers,
  view: new ol.View({
    center: ol.proj.transform([0, 10], 'EPSG:4326', 'EPSG:3857'),
    zoom: 3
  })
});
</script>

<div id="map"></div>
<div id="toolbox">
<ul id="layerswitcher">
<li><label><input type="radio" name="layer" value="0" checked> MapQuest Satellite</label></li>
<li><label><input type="radio" name="layer" value="1"> MapQuest Hybrid</label></li>
<li><label><input type="radio" name="layer" value="2"> MapQuest OSM</label></li>
<li><label><input type="radio" name="layer" value="3"> OSM</label></li>
</ul>
</div>

This is great for having multiple base layer maps… In addition to this, I also need the ability to add layers (addLayer) to this same map that allow me to add multiple feature/vector layers to these maps via checkbox section. Ideas?
I was thinking something like this:

$("#layerswitcher input[name=layer]").change(function() { addLayer() } );

var layers = [];
layers[4] = new ol.layer.Image({
source: new ol.source.ImageWMS({
    url: 'http://demo.opengeo.org/geoserver/wms',
  params: {'LAYERS': 'topp:states'},
  serverType: 'geoserver'
      })
    })
  ];
layers[5] = new ol.layer.Image({
  source: new ol.source.ImageWMS({
    url: 'http://demo.opengeo.org/geoserver/wms',
    params: {'LAYERS': 'countries'},
    serverType: 'geoserver'
    })
  })
];
layers[6] =   new ol.layer.Image({
  source: new ol.source.ImageWMS({
    url: 'http://demo.opengeo.org/geoserver/wms',
    params: {'LAYERS': 'point_clouds'},
    serverType: 'geoserver'
   })
  })
];

but it isn't working.

Best Answer

Are you trying to add/remove layers?

You can do something similar by showing/hidding the layers like this

Assuming that you have something like this (and several other layers):

var layer1 = new ol.layer.Tile({
        source: new ol.source.Stamen({
            layer: 'toner'
        })
    });
var layer2 = new ol.layer.Tile({
        source: new ol.source.Stamen({
            layer: 'watercolor'
        })
    });
var viewObject = new ol.View({
        center: [0, 0],
        zoom: 2
    })

    var mapObject = new ol.Map({target: 'map'});

    mapObject.addLayer(raster);
    mapObject.addLayer(vectorLayer);
    mapObject.setView(viewObject);

Add checkboxes in the HTML:

<div>
    <label class="checkbox"><input type="checkbox" id="layer1" checked /> Layer 1</label>
    <label class="checkbox"><input type="checkbox" id="layer2" checked /> Layer 2</label>
</div>

Then, in your script section:

$('input[type=checkbox]').on('change', function () {
        var layer = {
            layer1: layer1,
            layer2: layer2
        }[$(this).attr('id')];
        layer.setVisible(!layer.getVisible());
    });

btw, you should add JQuery in order to make it work.

Related Question