Openlayers имеют функцию координат

Question

Я перевожу старое программное обеспечение с OL2 на OL4.Я столкнулся со странной проблемой с координатами объекта.Короче говоря, если я кодирую процедурный код, я получаю правильный результат, и карта отображается, как и ожидалось.Но если я закодирую функционал, то координата широты будет некорректна.Только широта!

Проверено на OL3 и OL4.Такое же поведениеНиже приведен процедурный стиль, который работает нормально.Существует кусок PHP для заполнения массива данных с сервера.

<script type="text/javascript">
<?php
$var = 'var data = [ ';
while ($row = mysqli_fetch_assoc($result)) {
        $nombre = $row["nombre"];
        $ruta = $row["ruta"];
        $lat = $row["lat"];
        $lon = $row["lon"];
        $fecha = $row["fecha_last_pos"];
        $var .= "{fecha: '$fecha', lon: $lon, lat: $lat, nombre: '$nombre', ruta: '$ruta'},";
}
$var = substr_replace($var,"",-1);
$var .= ' ];';
echo $var;
mysqli_close($sql);
?>
var vectorSource = new ol.source.Vector({});
function styleFunction() {
        return [new ol.style.Style({
                        image: new ol.style.Circle({
                                radius: 7,
                                fill: new ol.style.Fill({color: 'black'}),
                                stroke: new ol.style.Stroke({
                                        color: 'black', width: 2
                                })
                        }),
                        text: new ol.style.Text({
                                font: '12px Calibri,sans-serif',
                                fill: new ol.style.Fill({ color: '#fff' }),
                                offsetY: 14,
                                stroke: new ol.style.Stroke({
                                        color: '#1a5276', width: 6
                                }),
                                // get the text from the feature - `this` is ol.Feature
                                text: this.get('label')
                        })
                })
        ];
}
var i;
for (i=0; i<data.length; i++){
        var feature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform([data[i].lon, data[i].lat], 'EPSG:4326', 'EPSG:3857')),
                label: data[i].nombre
        });
        alert(data[i].lat);
        alert(feature.getGeometry().getCoordinates());
        feature.setStyle(styleFunction);
        vectorSource.addFeature(feature);
}
var vectorLayer = new ol.layer.Vector({
        source: vectorSource
});
var extent = vectorSource.getExtent();
var center = ol.extent.getCenter(extent);
var map = new ol.Map({
        layers: [new ol.layer.Tile({
                        source: new ol.source.OSM({url:'https://cbtest.xyz.net/osm_tiles/{z}/{x}/{y}.png'})
                }),
                vectorLayer
        ],
        target: 'map',
        view: new ol.View({
                center: center
        })
});
map.getView().fit(extent, map.getSize());

И ниже тот же процесс, использующий функцию updateCars () и вызов ajax внутри для заполнения массива данных.Координаты в массиве javascript анализируются правильно, но результаты координат широты объекта будут неправильно инициированы.

<script type="text/javascript">
var data = [];
var vectorSource = new ol.source.Vector({});
function styleFunction() {
        return [new ol.style.Style({
                        image: new ol.style.Circle({
                                radius: 7,
                                fill: new ol.style.Fill({color: 'black'}),
                                stroke: new ol.style.Stroke({
                                        color: 'black', width: 2
                                })
                        }),
                        text: new ol.style.Text({
                                font: '12px Calibri,sans-serif',
                                fill: new ol.style.Fill({ color: '#fff' }),
                                offsetY: 14,
                                stroke: new ol.style.Stroke({
                                        color: '#1a5276', width: 6
                                }),
                                // get the text from the feature - `this` is ol.Feature
                                text: this.get('label')
                        })
                })
        ];
}
updateCars();
var vectorLayer = new ol.layer.Vector({
        source: vectorSource
});
var extent = vectorSource.getExtent();
var center = ol.extent.getCenter(extent);
var map = new ol.Map({
        layers: [new ol.layer.Tile({
                        source: new ol.source.OSM({url:'https://cbtest.xyz.net/osm_tiles/{z}/{x}/{y}.png'})
                }),
                vectorLayer
        ],
        target: 'map',
        view: new ol.View({
        //extent: extent,
                center: center
                //minZoom: 3,
                //maxZoom: 15,
                //center: ol.proj.fromLonLat([<?php echo $lon2.", ".$lat2;?>]),
                //center: ol.proj.fromLonLat([data[1].lon, data[1].lat]),
                //zoom: 10
        })
});
map.getView().fit(extent, map.getSize());
setInterval(
        function(){
                updateCars();
                },
                15000
);

function updateCars(){
        var i;
        if (window.XMLHttpRequest) { // Mozilla, Safari, ...
                httpRequest = new XMLHttpRequest();
        }else if(window.ActiveXObject) { // IE
                try {
                        httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
                }catch (e) {try {
                                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
                            }catch (e) {}
                }
        }
        if (!httpRequest) {
                alert('Giving up :( Cannot create an XMLHTTP instance');
                return false;
        }
        httpRequest.onreadystatechange = function(){
                                                if (httpRequest.readyState === 4) {
                                                        if (httpRequest.status === 200) {
                                                                data = JSON.parse(httpRequest.responseText);
                                                                //document.getElementById("PKdCar_dir").innerHTML = httpRequest.responseText;
                                                        } else {
                                                                //alert('There was a problem with the request.');
                                                        }
                                                }
                                        };
        httpRequest.open('POST', "updmapa.php", false);
        httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        httpRequest.send("user=<?php echo $user_id; ?>");
        for (i=0; i<data.length; i++){
        var feature = new ol.Feature({
                        geometry: new ol.geom.Point(ol.proj.transform([data[i].lon, data[i].lat], 'EPSG:4326', 'EPSG:3857')),
                        label: data[i].nombre
                });
                alert(data[i].lat);
                alert(feature.getGeometry().getCoordinates());
                feature.setStyle(styleFunction);
                vectorSource.addFeature(feature);
        }
}

Конечно, getExtent () будет неуместен.Протестировано с OL3 и OL4.Такое же поведениеКто-то еще встречался с этим тоже?Я делаю что-то неправильно?Любая помощь приветствуется.