articodeltd / angular-cesium

JavaScript library for creating map based web apps using Cesium and Angular
https://github.com/articodeltd/angular-cesium/settings/pages
MIT License
178 stars 93 forks source link

ac-html-desc cannot receive CallbackProperty position #406

Open nadavpld opened 2 years ago

nadavpld commented 2 years ago

Trying to simulate a flight path of a 3d model helicopter.

<ac-map>
    <ac-layer acFor="let plane of planes$" [context]="this" [store]="true">
        <ac-model-desc props="{
            position: plane.position,
            minimumPixelSize: 100,
            uri: '../assets/models/scene.gltf'
          }">
          </ac-model-desc>
        <ac-html-desc props="{position: plane.position, show: true}">
            <ng-template let-plane>
                <div style="color: white">callsign</div>
            </ng-template>
        </ac-html-desc>
    </ac-layer>
</ac-map>

First try was a success, showing the model and the html as follows :

        this.planes = [
            {
                id: '0',
                actionType: ActionType.ADD_UPDATE,
                entity: {
                    position: new Cesium.Cartesian3.fromDegrees(33, 34)
                }
            },
            {
                id: '1',
                actionType: ActionType.ADD_UPDATE,
                entity: {
                    position: new Cesium.Cartesian3.fromDegrees(33, 34)
                }
            }
        ];
        this.planes$ = from(this.planes);

I have used a setInterval function which updated the position through a call for updateLayer

Thinking forward (displaying hundreds of planes), the updateLayer call is not scalable, I have tried using CallbackProperty as follows

        this.planes = [
            {
                id: '0',
                actionType: ActionType.ADD_UPDATE,
                entity: {
                    position: new Cesium.CallbackProperty(this.getPosition_0.bind(this), false)
                }
            },
            {
                id: '1',
                actionType: ActionType.ADD_UPDATE,
                entity: {
                    position: new Cesium.CallbackProperty(this.getPosition_1.bind(this), false)
                }
            }
        ];
        this.planes$ = from(this.planes);

The models are moving smoothless, the html label (which later will include a more complex view) was not showing at all.

By changing <ac-html-desc props="{position: plane.position, show: true}"> to <ac-html-desc props="{position: plane.position.getValue(), show: true}"> I got it to show, but obviously it is not updating and the label stays behind

image