open layer not getting accurate area by geojson

Question

I am Trying to set polygons by using json object but my polyons places on different location on map. I am using openlayers for a first time. I referred some examples on open layers docs but none will solve my issue. I am attaching some screen shots for the same. Please help me. If any documentation should I follow for this will be help me alot.

I tried following links:

1. https://gis.stackexchange.com/questions/134688/add-geojson-layer-to-openlayers-3
2. GeoJSON feature coordinates not displaying on OpenLayers map
3. Trying to display a GeoJSON on Openlayers 3

var image = new CircleStyle({
      radius: 5,
      fill: null,
      stroke: new Stroke({color: 'red', width: 1})
    });

    var styles = {
      'Point': new Style({
        image: image
      }),
      'LineString': new Style({
        stroke: new Stroke({
          color: 'green',
          width: 1
        })
      }),
      'MultiLineString': new Style({
        stroke: new Stroke({
          color: 'green',
          width: 1
        })
      }),
      'MultiPoint': new Style({
        image: image
      }),
      'MultiPolygon': new Style({
        stroke: new Stroke({
          color: 'yellow',
          width: 1
        }),
        fill: new Fill({
          color: 'rgba(255, 255, 0, 0.1)'
        })
      }),
      'Polygon': new Style({
        stroke: new Stroke({
          color: 'blue',
          lineDash: [4],
          width: 3
        }),
        fill: new Fill({
          color: 'rgba(0, 0, 255, 0.1)'
        })
      }),
      'GeometryCollection': new Style({
        stroke: new Stroke({
          color: 'magenta',
          width: 2
        }),
        fill: new Fill({
          color: 'magenta'
        }),
        image: new CircleStyle({
          radius: 10,
          fill: null,
          stroke: new Stroke({
            color: 'magenta'
          })
        })
      }),
      'Circle': new Style({
        stroke: new Stroke({
          color: 'red',
          width: 2
        }),
        fill: new Fill({
          color: 'rgba(255,0,0,0.2)'
        })
      })
    };

    var styleFunction = function(feature) {
      return styles[feature.getGeometry().getType()];
    };

 var geojsonObject = {
"type": "FeatureCollection",
"features": [
...
],
"totalFeatures": 12,
"numberMatched": 12,
"numberReturned": 12,
"timeStamp": "2019-04-23T05:39:42.875Z",
"crs": {
"type": "name",
"properties": {
"name": "urn:ogc:def:crs:EPSG::3997"
}
}
}

var vectorSource = new VectorSource({
      features: (new GeoJSON({
        featureProjection: 'EPSG:3997',
        dataProjection: 'EPSG:4326'
      })).readFeatures(geojsonObject),

    });
    // var center = fromLonLat([0, 0], 'EPSG:4326', 'EPSG:3997');
    vectorSource.addFeature(new Feature());

    var vectorLayer = new VectorLayer({
      source: vectorSource,
      style: styleFunction,
    });

    var map = new Map({
      layers: [
        new TileLayer({
          source: new OSM()
        }),
        vectorLayer
      ],
      target: 'map',
      view: new OlView({
        center: [0, 0],
        zoom: 2,

      })
    });

I am getting styles which are located on africa not on UAE area.

Answer 1

If the geojson data is EPSG:3997 and you are using a default OSM view you need

    dataProjection: 'EPSG:3997',
    featureProjection: 'EPSG:3857'

You also need to register the proj4 definition for EPSG:3997

  import {register} from 'ol/proj/proj4.js';
  import proj4 from 'proj4';

  proj4.defs('EPSG:3997',
      '+proj=tmerc +lat_0=0 +lon_0=55.33333333333334 +k=1 +x_0=500000 +y_0=0 +datum=WGS84 +units=m +no_defs');
  register(proj4);