openlayers - OpenLayers 显示倾斜的多边形

Question

我有一个 PostgreSQL / PostGIS 数据库，其中包含多边形（代表建筑物中楼层的房间）。当我尝试使用 matplotlib（直接来自数据库）或 mapshaper（来自包含多边形的 shapefile）绘制它们时，输出看起来很正常。但是，当 OpenLayers (5.3.0) 显示它们时 - 它们在 y 轴上有点倾斜和拉长。我在 OL 旁边使用ol-layerswitcher。

在 matplotlib 中绘制多边形：

在 OpenLayers 中绘制多边形：

我已经尝试通过在 y 轴上按比例缩小来应用“脏修复”，以期消除倾斜效应，但是缩放不起作用并且它实际上以某种方式恶化了输出（下图）。

这是地图初始化：

var mapView = new ol.View({
    center: ol.proj.fromLonLat([14.426102028368888, 45.3375708862643]),
    zoom: 20,
    minZoom: 0
});
var levelsGroup = new ol.layer.Group({
    'title': 'Katovi',
    layers: []
});
levelsGroup.setZIndex(1);
var worldMap = new ol.layer.Tile({
    source: new ol.source.OSM(),
    zIndex: -1,
    projection: 'EPSG:3857'
});
var map = new ol.Map({
    layers: [
        levelsGroup,
        worldMap, // world map, for georeferencing
    ],
    target: 'map',
    view: mapView,
});

这是 OL 获取和解析数据的方式：

// ... get data from django with ajax
var singleLevel = new ol.layer.Group({ 
// create a layer group for the floor
    floor_num: JSON.parse(data[0])['features'][0]['properties']['level'],
    type: 'base',
    combine: true,
    visible: false,
    layers: []
});

for(var j = 0; j < data.length; j++) {
    // Parsing the JSON file from backend
    var parsedPolyType = JSON.parse(data[j]);
    var polyName = parsedPolyType['features'][0]["properties"]['name'];            

    // This will create a new vector layer with a source containing a single poly type (room or wall etc) for i-th floor
    var singleType = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: (new ol.format.GeoJSON()).readFeatures(parsedPolyType, { featureProjection: 'EPSG:3857' }),
        })           
    });

    for (var k = 0; k < singleType.getSource().getFeatures().length; k++) {
        singlePoly = singleType.getSource().getFeatures()[k];

        // [14.4253, 45.3371] are the coordinates of the bottom left point of the floor plan's bounding box
        singlePoly.getGeometry().scale(1, 0.95, ol.proj.transform([14.4253, 45.3371], 'EPSG:4326', 'EPSG:3857'));

       // style the geometry according to its type, 
       // if it's a polygon this will give it a black outline with white filling
        createStyle(singlePoly, singlePoly.getProperties().type, singlePoly.getProperties().name); 
    }

    singleLevel.getLayers().push(singleType);
}

var last_item = levelsGroup.getLayers().push(singleLevel) - 1;
levelGroups.push(singleLevel);

// switch to the new layer level and make it visible
switch_layer(levelsGroup, last_item); 

这是我在尝试缩放时得到的输出（x 轴上为 1，y 轴上为 0.95）：

除了有点分散之外，一些多边形失去了样式（蓝色样式是 OL 默认的）。无样式的多边形根本没有缩放。

所以，我有三个问题：
1）为什么多边形在 OpenLayers 中是倾斜的？
2）试图缩小它们时我做错了什么？
3）有没有更好的方法来解决这个肮脏的修复？

编辑：

忘了提一下，数据库中的多边形在 EPSG:4326 中。

这是用于样式的代码：

styles = {};
styles['room'] = {
    strokeColor: 'rgb(0, 0, 0)',
    strokeWidth: 3,
    fillColor: 'rgba(255, 255, 255, 1)'
}
styles['room'] = jQuery.extend({}, defaultStyle, styles['room']);
styles['wall'] = {
    strokeColor: 'rgb(0, 0, 0)',
    strokeWidth: 1,
    fillColor: 'rgba(200, 200, 200, 1)'
}
styles['wall'] = jQuery.extend({}, defaultStyle, styles['wall']);

function createStyle(singlePoly, styleName, polyName) {
    if(styleName in styles) {
        text = styleName == 'room' ? polyName : ''; 
        singlePoly.setStyle(styleWrapper(styleName, text));
    }
}

function styleWrapper(styleName, text) {
    var curr_style = styles[styleName];

    //returns a function which is used as a style for a polygon
    return function() {
        zoom = map.getView().getZoom();

        return [
            new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: curr_style.strokeColor,
                    width: curr_style.strokeWidth
                }),
                fill: new ol.style.Fill({
                    color: curr_style.fillColor
                }),
                text: new ol.style.Text({
                    scale: curr_style.textScale,
                    text: zoom >= curr_style.minZoom ? text : ''
                })
            })
        ];
    }
}

编辑2：

这是jsfiddle

标签： openlayersprojectionopenlayers-5