angular-cesium
angular-cesium copied to clipboard
ac-html-desc cannot receive CallbackProperty position
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