1

I am looking for zoom to filtered wms layer, but it is not working. I am using Openlayers 4 with geoserver. How to get the extent of filtered wms layer. I tried in API but it is not able applicable. Here is the my code

<!DOCTYPE html>
<html>
  <head>
    <title>Integrated Land Records Management System</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/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.5/build/ol.js"></script>
    <style>  
        .print_button {  
            position: absolute;  
            z-index: 100;  
            right: 20px;  
            top: 20px;    
        }
        .bhucode {
            margin-left: 30px;
        } 
    </style>
  </head>
  <body>
  Select Bhucode 
  <select id="bhucode" class="bhucode" >
    <option value="">Select Bhucode</option>
  </select>
    <div id="map" class="map">
    </div>   

    <script>
      var wmsSource = new ol.source.TileWMS({
        url: 'http://localhost:9090/geoserver/ilfs/wms',
        params: {'LAYERS': 'ilfs:dharani_samplevillage', 
            'TILED': true, 'format': 'image/png', 
            'VERSION': '1.1.1', 'SRS':'EPSG:4326',          
                "TRANSPARENT": true,
                "ISBASELAYER": true,
                "RATIO": 1,
                "TILED": true,
                "CQL_FILTER": "bhucode=11223344444555 and kid=243"
        },
        serverType: 'geoserver',
        transition: 0
        //crossOrigin: 'anonymous'      
      });

      var wmsLayer = new ol.layer.Tile({
          source: wmsSource,
          opacity: 0.7,
          visible: true          
      });

      var view = new ol.View({
          projection: 'EPSG:4326',        
          center: [0, 0],
          zoom: 18            
      });

      var map = new ol.Map({
          layers: [wmsLayer],
          target: 'map',
          view: view,
          renderer: 'canvas'
      });

      console.log("Layer Extent : "+wmsLayer.getSource().getExtent());

      var extent = map.getView().calculateExtent(map.getSize());
      console.log("Extent - "+ extent);    

      map.getView().fit(wmsLayer.getExtent(), map.getSize());

      var centerMap = map.getView().getCenter();
      console.log("Center : "+ centerMap);      
      map.getView().setCenter(centerMap);              

      var srs = JSON.stringify(view.getProjection().getCode());
        //ol.proj.Projection
      console.log("View SRS : "+srs);
      console.log("WMSSource SRS : "+ JSON.stringify(wmsSource.params));
  </script>
  </body>
</html>

Please help me with the above code to get the extent, and how to apply the extent to below. map.getView().fitExtent(extent, map.getSize());

  • 1
    Using filters does not change the extent of a WMS layer. The map is still covering the same area but some features are just not rendered on the map. Read the geometries from WFS service with the same filter "CQL_FILTER": "bhucode=11223344444555 and kid=243"and then you will have something to zoom into. – user30184 May 25 '18 at 6:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.