Цезий: потоковый пример CZML

Question

Похоже, этот вопрос уже задавался, но я не смог найти подходящий пример. Я знаком с PHP, но плохо знаком с Javascript и не могу понять, как транслировать CZML.

Я хочу показать около 6,500 активов на карте. Чтобы веб-страница не отображалась ПОСЛЕ того, как все загружено (и проверяется терпение пользователей), я хочу, чтобы она отображалась, а затем загружала ресурсы в фоновом режиме.

Может кто-нибудь указать мне пример, как это сделать? Я могу загрузить файл czml следующим образом:

var czmlDataSource = new Cesium.CzmlDataSource(); 
viewer.dataSources.add(czmlDataSource); 
czmlDataSource.loadUrl('some_file.czml'); 

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

[ 
event: czml 
data: { 
    "id":"document", 
    "version":"1.0" 
  } 

event: czml 
data: { 
    "id":"1", 
    "billboard":{ 
      "image":"label.png", 
      "verticalOrigin":"BOTTOM", 
      "show":true 
    }, 
    "position":{ 
      "cartographicDegrees":[ 
        20.0, 50.0, 0 
      ] 
    } 
  } 

event: czml 
data: { 
    "id":"2", 
    "billboard":{ 
      "image":"label.png", 
      "verticalOrigin":"BOTTOM", 
      "show":true 
    }, 
    "position":{ 
      "cartographicDegrees":[ 
        10.0, 52.0, 0 
      ] 
    } 
  } 
] 

Было бы здорово, если бы кто-нибудь смог предоставить рабочий образец, например, файл.czml и файл.js. Спасибо!

Answer 1

Если у вас есть сетевой потоковый источник CZML, клиентский JavaScript-код должен вызывать process(), а не load() для настройки потокового источника.

var czmlStream = new Cesium.CzmlDataSource();
var czmlEventSource = new EventSource('some_url_to_czml');
czmlEventSource.addEventListener('czml', function(czmlUpdate) {
      try {
         var json = JSON.parse(czmlUpdate.data);
         console.log('czml event id=', json.id);
         //process the 'data:' coming across as JSON into the datasource 
         czmlStream.process(json);
      } catch (t) {
         console.error(t)
      }       
    }, false);

//put the streaming datasource into Cesium 
viewer.dataSources.add(czmlStream);

Обратите внимание, что для работы вышеуказанного кода источник потоковой передачи должен установить тип содержимого в ответе HTTP на text/event-stream,

Чтобы отменить поток от клиента, просто позвоните:

czmlEventSource .close();

Чтобы отменить поток с сервера, ответьте не с типом "текст / поток событий" Content-Type или верните HTTP-статус, отличный от 200 OK (например, 404 Not Found).

Если вы загружаете из статического файла CZML, тогда вызовите load() с URL или относительной ссылкой на файл.

var dataSource= Cesium.CzmlDataSource.load('some_file.czml');
viewer.dataSources.add(dataSource);

Answer 2

Одна часть вопроса, на которую не дан ответ, касается формата файла czml. Пример, размещенный в вопросе, имеет несколько ошибок / недоразумений. Все ваши данные JSON должны быть в одной строке для каждого data поле, или вы можете добавить data поле для каждой строки, как у меня. Вы также должны иметь два возвращаемых символа после каждого пакета, иначе поток не будет знать, где заканчиваться, это также верно и для последнего пакета в конце файла! Я также недавно боролся с этим, и причина, по которой вы ничего не нашли на сайте Cesium, заключается в том, что это технически является частью определения форматов потока событий, а не czml. Вы можете найти больше информации о формате здесь. Ниже приведен правильный пример вашего czml, отформатированного правильно (Примечание: фрагмент удалил последние два возвращаемых символа после последнего пакета, не забудьте их!):

event: czml
data: {
data:    "id":"document",
data:    "version":"1.0"
data:  }


event: czml
data: {"id":"1",
data:        "billboard":{
data:          "image":"label.png",
data:          "verticalOrigin":"BOTTOM",
data:          "show":true
data:        },
data:        "position":{
data:          "cartographicDegrees":[
data:            20.0, 50.0, 0
data:          ]
data:        }
data:      }


event: czml
data: {"id":"me",
data:        "billboard":{
data:          "image":"label.png",
data:          "verticalOrigin":"BOTTOM",
data:          "show":true
data:        },
data:        "position":{
data:          "cartographicDegrees":[
data:            10.0, 50.0, 0
data:          ]
data:        }
data:      }