如何在OpenLayers中正确显示EPSG:2180坐标系的MULTIPOLYGON数据？

要正确显示EPSG:2180坐标系的多面区域，需要解决投影注册、坐标转换两个核心问题，具体修改方案如下：

关键修改点 #

• 注册EPSG:2180投影：OpenLayers默认未内置该坐标系，需通过proj4js添加其官方投影参数，确保系统能识别并完成坐标转换。
• 修正WKT读取参数：读取WKT时，featureProjection需设置为OSM底图使用的EPSG:3857，让矢量数据从EPSG:2180转换到地图坐标系。
• 转换视图中心坐标：将原EPSG:2180的中心坐标转换为EPSG:3857，保证地图定位到目标区域。

修改后的完整代码 #

<!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>
    // 注册EPSG:2180投影定义
    proj4.defs("EPSG:2180", "+proj=tmerc +lat_0=0 +lon_0=19 +k=0.9993 +x_0=500000 +y_0=-5300000 +ellps=GRS80 +units=m +no_defs");
    // 让OpenLayers识别该投影
    ol.proj.proj4.register(proj4);

    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]
        }),
        style: new ol.style.Style({ // 可选：添加样式让多边形更显眼
            stroke: new ol.style.Stroke({
                color: 'red',
                width: 2
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255, 0, 0, 0.1)'
            })
        })
    });
    var map = new ol.Map({
        layers: [raster, vector],
        target: 'map',
        view: new ol.View({
            // 将EPSG:2180的中心坐标转换为EPSG:3857
            center: ol.proj.transform([497700.486018679, 520452.398175831], 'EPSG:2180', 'EPSG:3857'),
            zoom: 14
        })
    });
</script>
</body>
</html>

补充说明 #

• 代码中添加了可选的矢量样式，方便更清晰地查看多边形区域；
• EPSG:2180的投影参数采用官方标准定义，确保坐标转换的准确性。

内容的提问来源于stack exchange，提问作者rdz