1

I am querying a feature from WFS using ajax call. Feature from the WFS response is captured but when I am fitting the extent on view so that the queried feature is visible on screen it zoom to altogether different coordinates.

Probably projection could be a reason, I tried multiple ways but did not help.

Initial rendering isfine with below adjustment:

const CenterLonLat = [79.962883, 25.5936832];

const CenterLonLatObj = new ol.proj.fromLonLat(CenterLonLat); var view = new ol.View({ center: CenterLonLatObj, zoom: 5, maxZoom: 19.9, })

Querying Feature from WFS and to display the result on view:

 $.ajax({
      url: 'http://localhost:8080/geoserver/wfs',
      method: "POST",

  contentType: "application/xml",
  data: new XMLSerializer().serializeToString(featureRequest),
  }).done(function (data) {
         var parser = new ol.format.GeoJSON();
          var features = parser.readFeatures(data);
          var polygon = features[0].getGeometry(); // PolyGon captured form WFS 
          //view.fit(polygon, { padding: [170, 50, 30, 150], constrainResolution: false }); // Did not work

          var ext = polygon.getExtent();
          //ext = ol.proj.transform(ol.proj.get('EPSG:32644'), ol.proj.get('EPSG:3857')); // Did not work
          var TargetProj = new ol.proj.Projection({ code: 'EPSG:32644' });
          var SourceProj = new ol.proj.Projection({ code: 'EPSG:3857' });
          ext = ol.proj.transformExtent(ext, TargetProj, SourceProj);

          var viewZoom = map.getView();
          //viewZoom.fit(ext, { padding: [170, 50, 30, 150], constrainResolution: false }); // Did not work
          viewZoom.fit(ext); // Did not work
  });

Geometry data from response is :

"geometry":{"type":"Point","coordinates":[323844.168,2853297.764]}
"crs":{"type":"name","properties":{"name":"urn:ogc:def:crs:EPSG::32644"}}}

Please suggest.

1

After browsing few more posts and blogs and couple of approaches , I figured that I was supposed to use proj4 library to transform the extent. PFB my code changes :

Included proj4 library:

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.5.0/proj4.js"></script>

Within my ajax call :

 var parser = new ol.format.GeoJSON();
          var features = parser.readFeatures(data);
          var polygon = features[0].getGeometry();
          var ext = polygon.getExtent();

          var p4 = ol.proj.proj4;
          proj4.defs("EPSG:32644", "+proj=utm +zone=44 +datum=WGS84 +units=m +no_defs");
          p4.register(proj4);

          ext = ol.proj.transformExtent(ext, 'EPSG:32644', 'EPSG:3857');

          var viewZoom = map.getView();
          viewZoom.fit(ext);

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.