View renders WFS response at a different location

Question

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.

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