OpenLayers 3 动态更新 VectorLayer 中的数据
通过一个小例子,展示如何改变 VectorLayer 中的要素,并刷新地图。
源代码:qianyanseu/openlayers3-vectorlayer-source-update
关键代码
在 OpenLayers 3 中,更新矢量图层中的内容,可通过修改该图层的 DataSource 来实现。
下面这段代码实现了每5秒更新一次数据。更新时,首先将现有的要素集清空,再批量将获取到的要素集添加到图层中。对 addFeatures()
的调用会自动触发 changed
事件,导致图层重绘,因次不需要再专门调用地图重绘的方法。
var refreshInteval = 5000; // refresh every 5 seconds
setTimeout(updateFeaturesForVectorLayer, refreshInteval);
function updateFeaturesForVectorLayer(){
$.ajax({
type : "POST",
url : 'http://localhost/ol-test/countries.geojson',
dataType:"json",
success : function(datas) {
console.log('get data success, begin to update layer')
var features = (new ol.format.GeoJSON()).readFeatures(datas, {featureProjection:"EPSG:3857"});
vectorLayer.getSource().clear();
vectorLayer.getSource().addFeatures(features);
}
});
setTimeout(reflushMaiPage, refreshInteval);
}