Question

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

在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）： output

除了有些分散之外，某些多边形还会丢失其样式（蓝色样式是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：

Here's the jsfiddle

OpenLayers显示倾斜的多边形

0 个答案: