Cannot display a polygon on OpenLayers map

[nmcdtu]

I am trying to display some pre-defined polygons on OpenLayers map.
Here is a simplified example:

OpenLayers code

// Import OpenLayers
import Map from 'ol/Map';
import View from 'ol/View';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {OSM, Vector as VectorSource} from 'ol/source';
import Polygon from 'ol/geom/Polygon';
import Feature from 'ol/Feature';
import {fromLonLat, toLonLat} from 'ol/proj';

// An example how my polygon looks like
let poly = {
  "geometry": {
      "disposed": false,
      "pendingRemovals_": null,
      "dispatching_": null,
      "listeners_": {
          "change": [
              null
          ]
      },
      "revision_": 2,
      "ol_uid": "1052",
      "values_": null,
      "extent_": [
          165123.8742368748,
          7575687.985418316,
          990406.8027610166,
          8337355.480032606
      ],
      "extentRevision_": 2,
      "simplifiedGeometryMaxMinSquaredTolerance": 0,
      "simplifiedGeometryRevision": 0,
      "layout": "XY",
      "stride": 2,
      "ends_": [
          30
      ],
      "flatInteriorPointRevision_": -1,
      "flatInteriorPoint_": null,
      "maxDelta_": -1,
      "maxDeltaRevision_": -1,
      "orientedRevision_": -1,
      "orientedFlatCoordinates_": null,
      "flatCoordinates": [
          165123.8742368748,
          8058194.798106767,
          190541.8988476502,
          8243332.77467022,
          219088.74212551414,
          8337355.480032606,
          461505.4384724312,
          8330723.247582969,
          496156.1147971025,
          8089901.4970778795,
          696078.6551876899,
          7900594.4475725405,
          990406.8027610166,
          7904937.674717132,
          989444.7035610497,
          7903864.868498758,
          941577.322519942,
          7887564.972623208,
          888700.5643931371,
          7862663.144423331,
          560308.0665529618,
          7677112.88588447,
          361788.34507816465,
          7575687.985418316,
          290914.8988332394,
          7677786.773959787,
          218742.7994087826,
          7947387.422397496,
          165123.8742368748,
          8058194.798106767
      ]
  },
  "fid": 45,
  "code_color": "#ed91db",
  "ol_color": "#1f78b4"
}
 
// Convert flatCoordinates from EPSG:3857 to EPSG:4326
let flatCoordinatesLonLat = [];
for (let i = 0; i < poly.geometry.flatCoordinates.length; i += 2) {
    let lonLat = toLonLat([poly.geometry.flatCoordinates[i], poly.geometry.flatCoordinates[i + 1]]);
    flatCoordinatesLonLat.push(lonLat[0], lonLat[1]);
}

// Create a polygon from the flatCoordinates
let polygon = new Polygon([flatCoordinatesLonLat]);

// Create a feature with the polygon
let feature = new Feature(polygon);

// Create a vector source and add the feature to it
let vectorSource = new VectorSource({
    features: [feature]
});

// Create a vector layer from the vector source
let vectorLayer = new VectorLayer({
    source: vectorSource
});

// Create a map
let map = new Map({
    target: 'map',
    layers: [
        new TileLayer({
            source: new OSM()
        }),
        vectorLayer
    ],
    view: new View({
        center: fromLonLat([12.56, 55.67]),
        zoom: 12,
        maxZoom: 20,
    }),
    controls: defaultControls().extend([scaleLineControl]),
});

There were no errors, but my polygon was not displayed on the map.

I really appreciate if someone could show me my errors, thank you!

[ahocevar]

You should not be converting the coordinates to EPSG:4326. The Vector source expects them in EPSG:3857 (or whatever your map view's projection is).