数据流

随着实时数据量的迅速增长,人们对数据能够即时显示在手机、计算机上的需求越来越强烈。客户端与服务器之间对实时数据传输一般采用 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;
}

查看完整示例代码

results matching ""

    No results matching ""