动态更新标记开孔层的位置 3.

Dynamically Update Position of Marker Openlayers 3

本文关键字：位置 孔层 更新 动态      更新时间：2023-09-26

我有这个代码来显示车辆的当前位置 

var icon="http://www.openstreetmap.org/openlayers/img/marker.png";
window.setInterval (function () {
    $.ajax({
        url:"Dispatch_Action.vms?parameter=vehiclelive&action=customfilter",
        type:"GET",
        cache:false,
        dataType: 'json',
        success:function(response) {
             $.each(response, function(recordCount, records) {
                $.each(records, function(index, element) {
                    var createIcon=addMarker(element.LongitudePosition,element.LatitudePosition,icon); 
                });
            }); 

        }, error:function() {
            console.log("Connection Failed");
        }
    });
}, 4000);

我需要在下一个 ajax 调用中更新车辆的位置。我的添加标记函数如下

function addMarker(lon,lat,icon) {

var iconFeatures=[];
var iconGeometry=new ol.geom.Point(ol.proj.transform([lon,lat], 'EPSG:4326','EPSG:3857'));
var iconFeature = new ol.Feature({
    geometry:iconGeometry
});
iconFeatures.push(iconFeature);
var vectorSource = new ol.source.Vector({
    features: iconFeatures //add an array of features
});
var iconStyle = new ol.style.Style({
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchor: [0.5, 46],
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.95,
        src:icon
    }))
});
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: iconStyle
});
map.addLayer(vectorLayer);
return iconFeature;

}

由于此函数返回图标特征，我可以使用 set坐标函数。但这样做不会更新位置。知道怎么做吗？？

全局初始化您的图标、矢量源和图层

var iconFeatures=[];
var vectorSource = new ol.source.Vector({
    features: iconFeatures //add an array of features
});
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    style: iconStyle
});
map.addLayer(vectorLayer);

创建一个函数来填充标记

function addMarker(lon,lat,icon) {

var iconGeometry=new ol.geom.Point(ol.proj.transform([lon,lat], 'EPSG:4326','EPSG:3857'));
var iconFeature = new ol.Feature({
    geometry:iconGeometry
});
iconFeatures.push(iconFeature);
}

您的呼叫代码应如下所示

var icon="http://www.openstreetmap.org/openlayers/img/marker.png";
window.setInterval (function () {
//clean the layer from any existing markers
vectorSource.clear();
    $.ajax({
        url:"Dispatch_Action.vms?parameter=vehiclelive&action=customfilter",
        type:"GET",
        cache:false,
        dataType: 'json',
        success:function(response) {
             $.each(response, function(recordCount, records) {
                $.each(records, function(index, element) {
                    var createIcon=addMarker(element.LongitudePosition,element.LatitudePosition,icon); 
                });
            }); 
     //and here add the newly created features to the layer
     vectorSource.addFeatures(iconFeatures);
        }, error:function() {
            console.log("Connection Failed");
        }
    });
}, 4000);

我没有测试它，因为我没有时间制作小提琴。如果你真的需要一个具体的解决方案，你应该做一个小提琴来帮助我们，以帮助你。

相关文章：