OpenLayers transform EPSG

I'm preparing a project that visualizes MULTIPOLYGON data on an OpenStreetMap. I'm testing the solution on a sample area defined as MULTIPOLYGON(((497700.486018679 520452.398175831,497716.241129864 520362.650580387,497790.667185966 520394.23154406,497700.486018679 520452.398175831))). This area is in EPSG:2180 and is correctly displayed here: https://wktmap.com/?d98dcd08. Based on available online resources, I've developed the code below; however, but it displays data on the map in EPSG:3857. I need help in understanding how the correct code should look to visualize the multipolygon area in EPSG:2180.

<!DOCTYPE html>
<html>
<head>
<title>WKT example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.9.1/proj4.js" integrity="sha512-b6xGAphpoiHdO8C81RQ2fF+kGmPrtMnBoZhbI4Z3OYGv0paVMl+WYQhuF5qg7OmjDagVEJvuvUKvdg52hT8qRw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div id="map" class="map"></div>
        </div>
    </div>
</div>
<script>
    var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    var format = new ol.format.WKT();
    var feature = format.readFeature(
        'MULTIPOLYGON(((497700.486018679 520452.398175831,497716.241129864 520362.650580387,497790.667185966 520394.23154406,497700.486018679 520452.398175831)))', {
            dataProjection: 'EPSG:2180',
            featureProjection: 'EPSG:2180'
        });
    var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [feature]
        })
    });
    var map = new ol.Map({
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
            center: [497700.486018679, 520452.398175831],
            zoom: 14
        })
    });
</script>
</body>
</html>

Solution

After adding the projection definition and correcting the featureProjection OpenLayers 4.6.5 seems be compatible with the latest version of proj4.js. The view center also needed to be transformed from EPSG:2180 to the view projection.

<!DOCTYPE html>
<html>
<head>
<title>WKT example</title>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/4.6.5/ol.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.9.1/proj4.js" integrity="sha512-b6xGAphpoiHdO8C81RQ2fF+kGmPrtMnBoZhbI4Z3OYGv0paVMl+WYQhuF5qg7OmjDagVEJvuvUKvdg52hT8qRw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://epsg.io/2180.js"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12">
            <div id="map" class="map"></div>
        </div>
    </div>
</div>
<script>
    var raster = new ol.layer.Tile({
        source: new ol.source.OSM()
    });

    var format = new ol.format.WKT();
    var feature = format.readFeature(
        'MULTIPOLYGON(((497700.486018679 520452.398175831,497716.241129864 520362.650580387,497790.667185966 520394.23154406,497700.486018679 520452.398175831)))', {
            dataProjection: 'EPSG:2180',
            featureProjection: 'EPSG:3857'
        });
    var vector = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [feature]
        })
    });
    var map = new ol.Map({
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
            center: ol.proj.transform([497700.486018679, 520452.398175831], 'EPSG:2180', 'EPSG:3857'),
            zoom: 14
        })
    });
</script>
</body>
</html>