标记的OpenLayers 3

的动态更新位置我有显示vehichles标记的OpenLayers 3

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

我需要更新vehichles在未来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功能。但这样做不会更新位置。任何想法如何做到这一点？

来源

2016-02-29 KcYoosuf

使用setCoordinates应更新位置。创建一个jsfiddle来重现该错误。它会帮助你得到答案。 – oterral

如果只有一个标记，并且没有对函数addMarker（）的迭代调用，setCoordinates（）会执行该作业。但这里情况不同。 json响应包含多个车辆位置，当我使用setCoordinates（）这个代码时，代替更改当前位置，将创建另一个标记。 – KcYoosuf

每次调用'addMarker'函数时，都会向地图'map.addLayer（vectorLayer）;'添加一个图层;'这听起来像是创建新标记的逻辑。最好让小提琴向我们展示你的情况。 – pavlos

初始化你iconfetaures，矢量源和全球

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

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

来源

2016-02-29 11:19:53 pavlos

其工作..！谢谢...需要一些改变，但我认为我可以照顾它.. – KcYoosuf

好运amigo。乐意效劳 – pavlos

标记的OpenLayers 3

回答

相关问题