[GIS] Setting Base Layer in OpenLayers 3

openlayersopenlayers-2

I know there is a setBaseLayer function in OpenLayers 2. Is there a way I can accomplish that in OpenLayers 3?

Best Answer

You can set the base layer by doing:

var layers = this.map.getLayers();
layers.insertAt(0, base_layer);

Related Solutions

[GIS] More zoom in base layer in OpenLayers

If you create your own basemap layer (using osm data) and use an aerial WMS as an overlay you can define additional zoom levels by adding more scales and maxZoomLevels, see example below:

var options = { scales: [34879630, 17439815, 8719907, 4359953, 2179976, 1089988, 544994, 272497, 136249, 68124, 34062, 17031, 8516, 4258, 2129, 1064, 500, 250, 125, 75],
                    maxExtent: bounds,
                    numZoomLevels: 20,
                    projection: "EPSG:4326",
                    units: "degrees"
                  };

OpenLayers 3 – Setting Layer Visibility

Aragon, your answer pointed me in the right direction. Below is my final unclean code for adding layers to an array and then controling them.

In a javascript file I initialized the map and used a function to toggle visibility as follows:

//Layer array
var layersArray = [];

//Map view (Initial location)
var view = new ol.View2D({
// the view's initial state
center: ol.proj.transform([*Lat*,*Long*], 'EPSG:4326', 'EPSG:3857'),
zoom: 12
});

/*  Map Initialization  */
function initializeMap(){

var esribase = new ol.layer.Tile({
preload: Infinity,
  source: new ol.source.XYZ({
    url: 'http://server.arcgisonline.com/ArcGIS/rest/services/' +
        'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
  })
});

var poly1 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly1.setVisible(false);

var poly2 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly2.setVisible(false);

var poly3 = new ol.layer.Tile({
source: new ol.source.TileWMS({
  url: 'http://localhost:8080/geoserver/wms',
  params: {'LAYERS': '*Workspace*:*Layer*', 'TILED': true}
 })
}); 
poly3.setVisible(false);

layersArray.push(esribase); //0
layersArray.push(poly1); //1
layersArray.push(poly2); //2
layersArray.push(poly3);//3

var map = new ol.Map({
controls: ol.control.defaults().extend([
new ol.control.ScaleLine({
  units: ol.control.ScaleLineUnits.METRIC
})
]),
renderer: ol.RendererHint.CANVAS,
target: 'map',
layers: layersArray,

view:view
});
}

// Layer visibility function
function layerswitch(evt){
layersArray[evt.value].setVisible(evt.checked);
}

In the HTML I used simple checkboxes (example of poly1 toggle):

<input  style='cursor:pointer' type="checkbox" value="1" onclick="javascript:layerswitch(this)" class="Cpoly1" name="poly1check" id="poly1check"/><label id="poly1checkLabel" for="poly1check">Polygon 1 Layer Switcher</label>

Best Answer

Related Solutions

[GIS] More zoom in base layer in OpenLayers

OpenLayers 3 – Setting Layer Visibility

Related Question