How to add layers on open layers map through a checkbox?
Question
<html> <head> <title>Single Image WMS</title> <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css"> <.-- The line below is only needed for old environments like Internet Explorer and Android 4:x --> <script src="https.//cdn.polyfill.io/v2/polyfill.min?js,features=requestAnimationFrame.Element.prototype,classList:URL"></script> <script src="https.//openlayers.org/en/v4.6.4/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <script> var layers = [ new ol.layer:Tile({ source. new ol.source.OSM() new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//': params: {'LAYERS', '//'}: ratio, 1: serverType, 'geoserver' }) }). new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//': params: {'LAYERS', '//'}: ratio, 1: serverType, 'geoserver' }) }). new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//': params: {'LAYERS', '//'}: ratio, 1: serverType, 'geoserver' }) }). new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//': params: {'LAYERS', '//'}: ratio, 1: serverType, 'geoserver' }) }). new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//': params: {'LAYERS', '//'}: ratio, 1: serverType, 'geoserver' }) }). new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//s': params: {'LAYERS', '//'}: ratio, 1: serverType, 'geoserver' }) }). new ol.layer:Image({ //extent, [-13884991, 2870341, -7455066, 6338219]: source. new ol.source:ImageWMS({ url, '//': params: {'LAYERS', '//'}: ratio, 1: serverType; 'geoserver' }) }) ]. var map = new ol:Map({ layers, layers: target, 'map': view. new ol:View({ center. ol.proj.fromLonLat([73,6608. 29,8820]): zoom; 9 }) }); </script> </body> </html>
All the layers must be in form of a checkbox and on checking the box the following must be added to the map? All the layers must be in form of a checkbox and on checking the box the following must be added to the map? All the layers must be in form of a checkbox and on checking the box the following must be added to the map?
3 answers
solution1
1 ACCPTED 2018-04-23 19:39:15
You need first (Layer Switcher Control) js+css, you can download them from this link:
https://github.com/GitiFarazPishro/ol3-ext/tree/gh-pages/control
Then you can define your layers in the control switcher like this:
//for the baselayer
var Base = {}
Base['1'] = new ol.layer.Tile({
source: new ol.source.OSM(),
baseLayer: true,
displayInLayerSwitcher: true,
visible: true,
title: "Base Layer"
});
//for the other layers:
var questionLayers = {};
questionLayers['1'] = new ol.layer.Tile({
source: new ol.source.OSM(),
visible: false,
title: "1"
});
questionLayers['2'] = new ol.layer.Image({
//extent: [-13884991, 2870341, -7455066, 6338219],
source: new ol.source.ImageWMS({
url: http://someurl
params: {},
ratio: 1,
serverType: 'geoserver',
}),
visible: false,
title: "2"
});
questionLayers['3'] = new ol.layer.Image({
//extent: [-13884991, 2870341, -7455066, 6338219],
source: new ol.source.ImageWMS({
url: http://someurl
params: {},
ratio: 1,
serverType: 'geoserver',
}),
visible: false,
title: "3"
});
questionLayers['4'] = new ol.layer.Image({
//extent: [-13884991, 2870341, -7455066, 6338219],
source: new ol.source.ImageWMS({
url: http://someurl
params: {},
ratio: 1,
serverType: 'geoserver',
}),
visible: false,
title: "4"
});
questionLayers['5'] = new ol.layer.Image({
//extent: [-13884991, 2870341, -7455066, 6338219],
source: new ol.source.ImageWMS({
url: http://someurl
params: {},
ratio: 1,
serverType: 'geoserver',
}),
visible: false,
title: "5"
});
questionLayers['6'] = new ol.layer.Image({
//extent: [-13884991, 2870341, -7455066, 6338219],
source: new ol.source.ImageWMS({
url: http://someurl
params: {},
ratio: 1,
serverType: 'geoserver',
}),
visible: false,
title: "6"
});
questionLayers['7'] = new ol.layer.Image({
//extent: [-13884991, 2870341, -7455066, 6338219],
source: new ol.source.ImageWMS({
url: http://someurl
params: {},
ratio: 1,
serverType: 'geoserver',
}),
visible: false,
title: "7"
});
questionLayers['8'] = new ol.layer.Image({
//extent: [-13884991, 2870341, -7455066, 6338219],
source: new ol.source.ImageWMS({
url: http://someurl
params: {},
ratio: 1,
serverType: 'geoserver',
}),
visible: false,
title: "8"
});
var stack = new ol.layer.Group({
title: 'Question Layers',
openInLayerSwitcher: false,
visible: false,
layers: Object.values(questionLayers)});
Define your map & control:
// this function to take the layers as array and add them into the switcher
function LayersToArray(layer) {
var array = [];
for( key in layer)
array[array.length]= layer[key];
return array;
}
var map = new ol.Map({
target: 'map',
logo:false,
view: new ol.View({
center: ol.proj.fromLonLat([73.6608, 29.8820]),
zoom: 9
}),
controls: ol.control.defaults().extend([
new ol.control.LayerSwitcher,
]),
layers: LayersToArray(Base).concat( [stack] )
});
And your map, should be like this:
solution2
0 2018-04-24 08:12:48
If you want customize your own layer switcher you can do something along this path
// adding layer into variable
var osmBasic = new ol.layer.Tile({
source: new ol.source.OSM()
});
// adding/removing layer
$('#customCheck1').on('change', function() {
var isChecked = $(this).is(':checked');
if (isChecked) {
map.addLayer(osmBasic)
} else {
map.removeLayer(osmBasic);
}
})
Here is an example: https://jsfiddle.net/Svinjica/tqoLaLx8/
solution3
0 2022-08-26 04:53:34
I am gonna explain just How to add a new map layer? Adding a checkbox or a select input to choose the layer is kinda easy
First of all, you will need to add ol-mapbox-style library. This library combines open layers with mapbox (map-related library which has a lot of layer styles).
npm install ol-mapbox-style --save
Afterwards, once you have your map created, you apply the layer pulled from the url. You will need your mapbox token to use the api.
import { apply } from 'ol-mapbox-style';
apply('map', 'https://api.mapbox.com/styles/v1/mapbox/bright-v9?access_token=YOUR_MAPBOX_TOKEN');
The 'map' is the map object from open layers and the 'bright-v9' in the url is the actual layer applied to the map
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.