数据流
随着实时数据量的迅速增长,人们对数据能够即时显示在手机、计算机上的需求越来越强烈。客户端与服务器之间对实时数据传输一般采用 WebSocket 协议、TCP 协议、HTTP 协议以及 Kafka 专用通讯协议等,可传输的数据格式包括 CSV、JSON 、GeoJSON等。
本节以查询一个线数据为例,每两秒将一个点通过 dataFlowService 传输给服务器,用来模拟实时数据。
//实例化 DataFlow 对象
var source = new ol.source.DataFlow({
ws: urlDataFlow
});
//绑定添加要素事件进行内容赋值与坐标位置设置
source.on('addfeature', function (e) {
var feature = e.feature;
content.innerHTML = feature.get('time');
overlay.setPosition(feature.getGeometry().getCoordinates());
});
var resultLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
image: new ol.style.Circle({
fill: fill,
radius: 6
}),
fill: fill,
})
});
//模拟实时数据
//查询一个线数据,每两秒将一个点通过dataFlowService广播给iSevrer的dataflow服务
new ol.supermap.QueryService(urlQuery)
.queryBySQL(param, function (serviceResult) {
featureResult = serviceResult;
dataFlowBroadcast = new ol.supermap.DataFlowService(urlDataFlow).initBroadcast();
dataFlowBroadcast.on('broadcastSocketConnected', function (e) {
//一直调用下方的广播函数
timer = window.setInterval("broadcast()", 2000);
})
map.addLayer(resultLayer);
});
}
通过间隔2秒的定时器对 broadcast 函数进行连续调用,通过 count 的自增来模拟实时的坐标位置的变化,产生实时数据的效果。
var count = 200;
function broadcast() {
//如果count大于模拟坐标点数组长度,清除定时器。
if (count >= featureResult.result.recordsets[0].features.features[0].geometry.coordinates.length) {
window.clearInterval(timer);
return;
}
var point = featureResult.result.recordsets[0].features.features[0].geometry.coordinates[count];
var feature = {
geometry: {
coordinates: [point[0], point[1]],
type: "Point"
},
type: "Feature",
properties: {
id: 1,
time: new Date()
}
};
//向dataflow服务推送数据
dataFlowBroadcast.broadcast(feature);
count += 3;
}