Как я могу создать движущуюся линию между двумя объектами в CesiumJS?

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

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

Есть ли хорошие примеры этого или документы, на которые кто-то мог бы мне указать? Спасибо!


person Brian Putnam    schedule 10.11.2015    source источник


Ответы (2)


Разобрался: @emackey направил меня на правильный путь, указав на этот раздел файла simple.czml. Часть, с которой у меня возникли проблемы при переводе из CZML в javascript, заключалась в этом разделе, который динамически указывает, где строка должна начинаться и заканчиваться:

"positions":{
  "references":[
    "Facility/AGI#position","Satellite/ISS#position"
  ]
}

Оказалось, что для этого мне нужны были классы PositionPropertyArray и ReferenceProperty. С этими двумя я могу добавить динамическую строку к любому из моих объектов следующим образом:

var groundTrackEntity = cesiumViewer.entities.add({
    id: "groundTrackEntity",
    position: groundTrackPosition,
    point: /* ... */,
    path: /* ... */,
    polyline: {
        followSurface: false,
        positions: new Cesium.PositionPropertyArray([
            new Cesium.ReferenceProperty(
                cesiumViewer.entities,
                'orbitEntity',
                [ 'position' ]
            ),
            new Cesium.ReferenceProperty(
                cesiumViewer.entities,
                'groundTrackEntity',
                [ 'position' ]
            )
        ]),
        material: new Cesium.ColorMaterialProperty(
            Cesium.Color.YELLOW.withAlpha( 0.25 )
        )
    }
});
person Brian Putnam    schedule 10.11.2015
comment
Отлично сделано! Я думаю, вы можете принять свой собственный ответ здесь. - person emackey; 11.11.2015
comment
Мне нужно подождать еще один день, прежде чем я смогу принять свой собственный ответ. Ваше мнение определенно сыграло решающую роль в том, чтобы направить меня в правильном направлении, большое спасибо! - person Brian Putnam; 11.11.2015

Это делается путем добавления PolylineGraphics к одному из ваших объектов. Обязательно установите для этого значение "followSurface": false, так как вы не хотите, чтобы линия изгибалась в соответствии с кривизной Земли. Параметры здесь аналогичны тем, что вы видите в simple.czml., за исключением того, что вам не нужен список интервалов видимости, и вы можете просто установить здесь "show": true.

person emackey    schedule 10.11.2015
comment
Я немного возился с этим, и часть, на которой я застрял, заключается в том, как перевести "positions": { "references": [ ... ] } здесь. Насколько я понимаю, это каким-то образом связано с ReferenceProperty, но это, похоже, отслеживает одно свойство, и мне нужно отслеживать 2 (свойство position обоих объектов) - person Brian Putnam; 10.11.2015