Потоковая передача CZML в Cesium с использованием HTML5 EventSource

В настоящее время я рассматриваю возможность использования Cesium в качестве способа визуализации данных для личного проекта, и обновления в реальном времени были бы отличной возможностью.

Читая вики, я нашел этот раздел, в котором описывается, как можно выполнить динамическое обновление объектов в Cesium с помощью HTML EventSource API.

Я написал довольно простой сервер на Node.js, который создает text/event-stream, который периодически отправляет обновления позиции объекта. Эта часть работает нормально, и я могу успешно подключиться и записать эти данные в консоль.

Моя проблема связана с цезием. Я часами копался в документации (как вики Github, так и документацию JSDoc, включенную в загрузку), и я не могу понять, как добавить мой CZML на глобус. Используя приложение Cesium Viewer, поставляемое с исходным кодом, я вижу, как файлы CZML могут быть загружены как из локальных, так и из удаленных ресурсов, но я не могу понять, как изменить этот подход для приема пакетов CZML, поступающих из событий EventSource.

Пример моих пакетов CZML:

{
  'id': 'myObject',
  'availability': '2014-01-15T00:00Z/2014-01-01T24:00Z',
  'point': {
    'color': {
      'rgba': [255, 255, 0, 255]
    },
    'outlineWidth': 2.0,
    'pixelSize': 3.0,
    'show': true
  },
  'position': {
    'cartesian': [0.0, -2957000.0, -840000.0, 5581000.0],
    'epoch': '2014-01-01T00:00Z',
    'interpolationAlgorithm': 'LINEAR',
    'interpolationDegree': 1
  }
}

Мой текущий подход заключается в следующем:

var czmlStream;
var czmlStreamUrl = 'http://127.0.0.1:8080/czml-stream';

viewer.dataSources.add(czmlStream);

var czmlEventSource = new EventSource(czmlStreamUrl);
czmlEventSource.addEventListener('czml', function(czmlUpdate) {
  czmlStream.load(JSON.parse(czmlUpdate.data));
}, false);

К сожалению, это не работает. Я основывался на том, как можно загрузить статический файл CZML:

var source;
var sourceURL = 'http://127.0.0.1/czml-static.czml';

source.loadUrl(sourceURL).then(function() {
  viewer.dataSources.add(source);
}

Кто-нибудь знает, где я ошибаюсь, или, что еще лучше, правильный способ сделать это? Я использую Cesium b24 на случай, если это имеет значение. Если вам нужна дополнительная информация от меня, чтобы помочь, пожалуйста, спросите, и я обновлю вопрос.

Я попытался поискать в Google решение и пример кода, но не могу найти ничего, кроме вики-страница, описывающая, как можно использовать EventSource.


javascript html server-sent-events cesium
person user2583109    schedule 15.01.2014    source источник

Ответы (1)


arrow_upward
9
arrow_downward

Я знаю, что этому вопросу несколько недель, но вы когда-нибудь понимали это? В приведенном выше примере первое, что я замечаю, это то, что вы вызываете czmlStream.load вместо czmlStream.process. load очищает существующие данные, а process — нет. Для потоковой передачи вызов load приводит к тому, что появляется только последний пакет.

person Matthew Amato    schedule 03.02.2014