OpenLayers 投影到不同位置 Vs Bing 地图

Question

我正在使用带有 bing 地图的 OpenLayers。我添加了一个标记，但它显示在不同的位置。我在 bing 地图中使用了相同的坐标，它显示在正确的位置。

这是 OpneLayers 结果

    $(function () {

        var tileLayer = new ol.layer.Tile({
            source: new ol.source.BingMaps({
                key: 'Armnl..',
                imagerySet: 'Aerial'
            })
        });

        var map = new ol.Map({
            layers: [tileLayer],
            target: 'map',
            view: new ol.View({
                center: [-22.3869608, -49.7602708],
                zoom: 5,
            })
        });

        var p1 = new ol.Feature({
            geometry: new ol.geom.Point([-22.3869608, -49.7602708])
        });


        var vectorSource = new ol.source.Vector({
            features: [p1]
        });

        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });

        map.addLayer(vectorLayer);

    });

我需要转换坐标吗？

Answer 1

确实如此，您需要将坐标转换为 EPSG:3857。

您有 2 个不同的选择

1) 您使用 epsg:4326 构建地图。这意味着将进行客户端瓦片重投影。

这样做

var map = new ol.Map({
    layers: [tileLayer],
    target: 'map',
    view: new ol.View({
        projection:'EPSG:4326',
        center: [-22.3869608, -49.7602708],
        zoom: 5,
    })
});

2) 你从中心转变为'EPSG:3857'。应使用此投影，因为您未在 ol.view 配置中指定它。（投影自动从附加到地图的第一个图块层获得）。

这样做

var map = new ol.Map({
    layers: [tileLayer],
    target: 'map',
    view: new ol.View({
        center: ol.proj.transform([-22.3869608, -49.7602708], 'EPSG:4326','EPSG:3857');
        zoom: 5,
    })
});

矢量点结束

var p1 = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([-22.3869608, -49.7602708], 'EPSG:4326','EPSG:3857'))
        });

OpenLayers 投影到不同位置 Vs Bing 地图

OpenLayers projected to different location Vs Bing Maps

openlayers

bing-maps

openlayers-3