Suite

AddLayer avec switchLayer dans OpenLayers 3 ?


J'ai trouvé cet exemple pour changer de couche dans OpenLayers 3.

function switchLayer() { varcheckedLayer = $('#layerswitcher input[name=layer]:checked').val(); pour (i = 0, ii = couches.longueur; i < ii; ++i) couches[i].setVisible(i==checkedLayer); } $(function() { switchLayer() } ); $("#layerswitcher input[name=layer]").change(function() { switchLayer() } ); var couches = []; couches[0] = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'sat'}) }); couches[1] = nouveau ol.layer.Group({ calques : [ nouveau ol.layer.Tile({ source : nouveau ol.source.MapQuest({couche : 'sat'}) }), nouveau ol.layer.Tile ({ source : new ol.source.MapQuest({layer : 'hyb'}) }) ] }); couches[2] = new ol.layer.Tile({ source: new ol.source.MapQuest({layer: 'osm'}) }); couches[3] = new ol.layer.Tile({ source: new ol.source.OSM() }); var map = new ol.Map({ target : 'map', contrôles : ol.control.defaults().extend([ new ol.control.ScaleLine({ units:'metric' }) ]), calques : calques, vue : nouvelle ol.View({ center : ol.proj.transform([0, 10], 'EPSG:4326', 'EPSG:3857'), zoom : 3 }) });  

C'est idéal pour avoir plusieurs cartes de couche de base… En plus de cela, j'ai également besoin de la possibilité d'ajouter des couches (addLayer) à cette même carte qui me permettent d'ajouter plusieurs couches de caractéristiques/vecteurs à ces cartes via la section case à cocher. Des idées ? Je pensais à quelque chose comme ça :

$("#layerswitcher input[name=layer]").change(function() { addLayer() } ); var couches = []; layer[4] = new ol.layer.Image({ source : new ol.source.ImageWMS({ url : 'http://demo.opengeo.org/geoserver/wms', params : {'LAYERS' : 'topp :states'}, serverType : 'geoserver' }) }) ] ; layer[5] = new ol.layer.Image({ source : new ol.source.ImageWMS({ url : 'http://demo.opengeo.org/geoserver/wms', params : {'LAYERS' : 'countries '}, serverType : 'geoserver' }) }) ] ; couches[6] = new ol.layer.Image({ source : new ol.source.ImageWMS({ url : 'http://demo.opengeo.org/geoserver/wms', params : {'LAYERS' : 'point_clouds '}, serverType : 'geoserver' }) }) ] ;

mais ça ne marche pas.


Essayez-vous d'ajouter/supprimer des calques ?

Vous pouvez faire quelque chose de similaire en affichant/masquant les calques comme ceci

En supposant que vous ayez quelque chose comme ça (et plusieurs autres couches):

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

Ajoutez des cases à cocher dans le code HTML :

  

Ensuite, dans votre section script :

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

btw, vous devez ajouter JQuery pour que cela fonctionne.


Suivant Mauro Vieira Gonçalves réponse, j'ai pu mettre en œuvre un exemple de travail. Je viens de faire quelques modifications à son code d'origine.

var layer1 = new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'toner', visibilité:false }) }); var layer2 = new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'aquarelle', visibilité:false }) }); var viewObject = new ol.View({ center: [0, 0], zoom: 2 }) var mapObject = new ol.Map({target: 'map'}); mapObject.addLayer(layer1) ; mapObject.addLayer(calque1) ;

Cases à cocher HTML :

  

JQuery pour activer (vrai) la visibilité de la couche (faux) :

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


Voir la vidéo: Openlayers 6 Tutorial #6 - Layer Switcher (Octobre 2021).