Openlayers 3 动态更新标记位置

Question

我有这段代码用于显示车辆的当前位置。

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调用中更新车辆的位置。我的addMarker函数如下：

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;

由于该函数返回iconFeature，因此我可以使用setCoordinate函数。但这样做不会更新位置。有什么想法？

- KcYoosuf

---

使用 setCoordinates 应该会更新位置。创建一个 jsfiddle 来重现这个 bug。这样可以更快地得到解答。 - oterral

如果只有一个标记并且没有对addMarker()函数进行迭代调用，那么setCoordinates()函数可以完成任务。但是这里的情况不同。JSON响应包含多个车辆位置，当我在使用setCoordinates()代码时，它不会更改当前位置，而是创建另一个标记。 - KcYoosuf

每次调用 addMarker 函数，都会向地图 map.addLayer(vectorLayer); 添加一个新的图层，因此很合理地认为一个新的标记正在被创建。最好制作一个 fiddle 来展示您的情况。 - pavlos

是的，我知道addMarker()会创建一个新的图层。我该如何重写我的代码，以便在每个ajax调用中更新坐标？ - KcYoosuf

Answer 1

全局初始化您的图标特征、向量源和图层

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);

我还没有进行测试，因为我没有时间创建一个fiddle。如果你真的需要一个具体的解决方案，你应该创建一个fiddle来帮助我们帮助你。

- pavlos

---

它正在工作！谢谢……还需要一些更改，但我认为我可以处理好它。 - KcYoosuf