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测试。行为相同。 也有人遇到过吗？我做错什么了吗？ 任何帮助表示赞赏。