Javascript 动态更新标记Openlayers 3的位置
我有这个代码来显示车辆的当前位置Javascript 动态更新标记Openlayers 3的位置,javascript,jquery,openlayers-3,Javascript,Jquery,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:fals
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函数。但这样做并不能更新位置。你知道怎么做吗?在你的IConfeatures、矢量源和图层中全局初始化
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);
我没有测试它,因为我没有时间制作小提琴。如果你真的需要一个具体的解决方案,你应该帮助我们来帮助你 使用setCoordinates应更新位置。创建一个JSFIDLE来重现错误。如果只有一个标记并且没有对函数addMarker()的迭代调用,则setCoordinates()将执行此任务。但这里的情况不同。json响应包含多个车辆位置,当我将此代码用于带有setCoordinates()的代码时,将创建另一个标记,而不是更改当前位置。每次调用
addMarker
函数时,都会向mapmap.addLayer(vectorLayer)添加一个图层代码>听起来很有逻辑,因此正在创建一个新的标记。最好做一把小提琴给我们看看你的案例。是的,我知道addMarker()创建了一个新层。如何重新编写代码,以便在每个ajax调用中更新坐标。。!!谢谢需要一些改变,但我想我能处理好。。