Change Layer in OpenLayers, GeoServer

Question

Wish I could change the layers according to a certain selection criterion.

For this I made a select that acts an onchange event that normally should change what is seen on the map ....

But unfortunately this does not happen :(

Please help, I am very new to these things ....

Here is what I've done so far:

$( document ).ready(function() {
          $("#id_primarie").change(function(){
               console.log('test');
               
               var id_primarie = $('#id_primarie').val();
               
                var teren = new ol.layer.Tile({
                    source: new ol.source.TileWMS({
                              url:'http://127.0.0.1:10000/geoserver/ADMINISTRATIE/wms',
                              params: {'LAYERS': 'ADMINISTRATIE:teren', 
                                       'STYLES':'TEREN', 
                                       tiled:true, 
                                       transparent: true, 
                                       viewparams: 'id_primarie:'+id_primarie },
                              format: new ol.format.GeoJSON(),
                              ratio: 1,
                              serverType:'geoserver'
                    })
                });
                
                map.addLayer(teren);
               
          })
      });
  

Use: OpenLayers: 6.4.3 Geoserver 2.15.1

UPDATE:

cod:

$( document ).ready(function() {
          $("#id_primarie").change(function(){
               console.log('test');
               
               var id_primarie = $('#id_primarie').val();
               
               
                var map = new ol.Map({
                  target: 'map',
                  layers: [
                    new ol.layer.Tile({
                      source: new ol.source.OSM()
                    }),
                    new ol.layer.Tile({
                          source: new ol.source.XYZ({
                                  attributions: ['Powered by Esri', 'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
                                  attributionsCollapsible: true,
                                  url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
                                  maxZoom: 16
                          })
                      }),
                  ],
          
                  view: new ol.View({
                    center: [469713.24, 505416.01],
                    zoom: 35
                  })
                });
                
                proj4.defs('EPSG:31700','+proj=sterea +lat_0=46 +lon_0=25 +k=0.99975 +x_0=500000 +y_0=500000 +ellps=krass +towgs84=28,-121,-77,0,0,0,0 +units=m +no_defs');                      
                ol.proj.proj4.register(proj4);
      
               
               
                var teren = new ol.layer.Tile({
                    source: new ol.source.TileWMS({
                              url:'http://127.0.0.1:10000/geoserver/ADMINISTRATIE/wms',
                              params: {'LAYERS': 'ADMINISTRATIE:teren', 
                                       'STYLES':'TEREN', 
                                       tiled:true, 
                                       transparent: true, 
                                       viewparams: 'id_primarie:'+id_primarie },
                              format: new ol.format.GeoJSON(),
                              ratio: 1,
                              serverType:'geoserver'
                    })
                });
                
                
                map.addLayer(teren);
               
          })
      });

Now he does what he needs only because the problem is that he puts the same map with different layers twice :(

Answer 1

In your first example teren should be global so you can remove the old layer before adding a new one

$( document ).ready(function() {
          var teren;

          $("#id_primarie").change(function(){
               console.log('test');
               
               map.removeLayer(teren);
               var id_primarie = $('#id_primarie').val();
               
                teren = new ol.layer.Tile({
                    source: new ol.source.TileWMS({
                              url:'http://127.0.0.1:10000/geoserver/ADMINISTRATIE/wms',
                              params: {'LAYERS': 'ADMINISTRATIE:teren', 
                                       'STYLES':'TEREN', 
                                       tiled:true, 
                                       transparent: true, 
                                       viewparams: 'id_primarie:'+id_primarie },
                              ratio: 1,
                              serverType:'geoserver'
                    })
                });
                
                map.addLayer(teren);
               
          })
      });

But it would be better to keep the same layer and update it by calling updateParams

$( document ).ready(function() {
          var teren = new ol.layer.Tile({
                    source: new ol.source.TileWMS({
                              url:'http://127.0.0.1:10000/geoserver/ADMINISTRATIE/wms',
                              params: {'LAYERS': 'ADMINISTRATIE:teren', 
                                       'STYLES':'TEREN', 
                                       tiled:true, 
                                       transparent: true, 
                                       viewparams: 'id_primarie:'+ $('#id_primarie').val() },
                              ratio: 1,
                              serverType:'geoserver'
                    })
                });
                
          map.addLayer(teren);

          $("#id_primarie").change(function(){
               teren.getSource().updateParams({
                   viewparams: 'id_primarie:'+ $('#id_primarie').val()
               });
          })
      });