標記的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

回答

相關問題