OpenLayers transform EPSG

Question

OpenLayers transform EPSG

80 views Asked by rdz At 16 September 2024 at 02:07

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>

Original Q&A

There are 1 answers

**Mike** · Accepted Answer · 2023-10-31 18:27:47

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>

TechQA.

OpenLayers transform EPSG

There are 1 answers

Related Questions in OPENLAYERS

Related Questions in OPENSTREETMAP

Related Questions in EPSG

Popular Questions

Popular Tags

Trending Questions