Question

我有一个数据集，其中包含许多船舶的AIS消息，代表它们在一段时间内所遵循的路线。数据集为.csv格式，我已将其上传到mongodb。我想为每艘飞船在leaflet.js地图上创建一条折线，但是我的方法在性能方面受到了影响。还有更好的主意吗？

我的方法
我将node.js与express用于后端，当客户端要求它们时，我使用猫鼬光标API将数据流传输到服务器（clientReady事件）。数据通过使用socket.io

实现的websocket到达客户端

socket.on('clientReady', () => {
console.log('Data stream to client initiated');
cursor = model.shipModel.find({}).lean().cursor();
cursor.on('data', (doc) => {
  socket.emit('data', doc);
  cursor.pause();
  socket.on('moreData', () => {
    cursor.resume();
  });
});

我在服务器已将第一个数据发送到客户端之后暂停了游标，以便向客户端创建较慢的数据流。当客户端发出“ moreData”事件时，光标会继续查找下一个数据，然后再次暂停。

我创建了一个Map，将每艘船存储为一个对象，每个对象都有一个数组字段，其中保存了路线的坐标。我为每艘船都创建了一条多义线作为初始坐标，每次到达一艘特定船的另外一对坐标时，我都必须在地图上搜索该船以更新坐标数组，然后将其传递给传单多义线刷新它。

  var mapShips = (ship) => {
  let element = ships.get(ship.MMSI);
  if (typeof element != 'undefined') {
    let latlng = [ship.LAT, ship.LON];
    element.coordinates.push(latlng);
    refreshPolyline(element.shipPolyline, element.coordinates);
  } else {
    let newShip = {};
    newShip.coordinates = [];
    let latlng = [ship.LAT, ship.LON];
    newShip.coordinates.push(latlng);
    newShip.shipPolyline = new L.polyline([latlng], {
      smoothFactor: 1,
      color: color,
      className: 'polylineStyle'
    }).addTo(map);
    ships.set(ship.MMSI, newShip);
  }
};

ships 是一个全局Map变量，用于保存船上物体
ship 是用于刷新折线的新船信息

使用Leaflet.js绘制船只路线|折线

0 个答案: