Converting entities positions to callback property

CesiumJS
1

I want to know is there any good way for converting static entities into dynamic ones?
My problem is that I have dataSource with entites collection which includes entites with static position values added to viewer and I want to convert them into entities with callbackProperty as position.
This how i tried to achieve that:

let clone, position, id, area, next, prev, label, labelPosition, positionCB, positionToArr, positionsArr, newEntity;
let collection = new Cesium.CustomDataSource(picked.id.entityCollection.owner.name)
let collection2 = new Cesium.CustomDataSource(picked.id.entityCollection.owner.name)

  this.viewer.dataSources.getByName(picked.id.entityCollection.owner.name)[0].entities.values.forEach((entity) => {
    id = entity.id
    area = entity.area
    next = entity.next
    prev = entity.prev
    newEntity = undefined
    clone = undefined
    label = undefined
    position = undefined
    positionCB = undefined

    if (entity.id.includes("Point")){
      position = entity.position.getValue(0)
      positionCB = new Cesium.CallbackProperty((time, result) => {
        return new Cesium.Cartesian3.fromElements(position.x, position.y, position.z, result)
      }, false)
      label = entity.label
      clone = entity.ellipse.clone()
      newEntity = new Cesium.Entity({ellipse: clone, position: positionCB, id: id})
    }
    if (entity.id.includes("Distance")){
      position = entity.polyline.positions.getValue()
      positionToArr = position.map(function(obj) {
        return Object.keys(obj).sort().map(function(key) { 
          return obj[key];
        });
      });
      positionsArr = positionToArr.flat()
      positionCB = new Cesium.CallbackProperty((time, result) => {
        return Cesium.Cartesian3.unpackArray(positionsArr, result)
      }, false)
      labelPosition = entity.position.getValue(0)
      label = entity.label
      clone = entity.polyline.clone()
      clone.positions = positionCB
      newEntity = new Cesium.Entity({polyline: clone, id: id, area: area, next: next, prev: prev, position: labelPosition})
    }
    if (entity.id.includes("Area")){
      position = entity.polygon.hierarchy.getValue()
      positionCB = new Cesium.CallbackProperty((time, result) => {
        return Cesium.Cartesian3.abs(position, result)
      }, false)
      labelPosition = entity.position.getValue(0)
      label = entity.label
      clone = entity.polygon.clone()
      clone.hierarchy = position
      newEntity = new Cesium.Entity({polygon: clone, id: id, position: labelPosition})
    }

    newEntity.label = label
    collection.entities.add(newEntity)
    collection2.entities.add(newEntity)
  })

  setTimeout(() => {
    this.viewer.dataSources.remove(this.viewer.dataSources.getByName(picked.id.entityCollection.owner.name)[0])
    this.viewer2.dataSources.remove(this.viewer2.dataSources.getByName(picked.id.entityCollection.owner.name)[0])
  }, 100)

  this.viewer.dataSources.add(collection)
  this.viewer2.dataSources.add(collection2)

when I console.log(newEntity.position.getValue()) inside forEach method it shows that everything is fine but after adding collections to viewers I’ve got error:

An error occurred while rendering. Rendering has stopped.
DeveloperError: normalized result is not a number
DeveloperError@http://localhost:8000/ line 2 > injectedScript:10460:13
Cesium</Cartesian3.normalize@http://localhost:8000/ line 2 > injectedScript:12018:13
Cesium</EllipseGeometryLibrary.computeEllipsePositions@http://localhost:8000/ line 2 > injectedScript:135882:40
computeRectangle2@http://localhost:8000/ line 2 > injectedScript:136737:48
get@http://localhost:8000/ line 2 > injectedScript:137033:29
getRectangle@http://localhost:8000/ line 2 > injectedScript:47958:11
Cesium</GroundPrimitive.prototype.update@http://localhost:8000/ line 2 > injectedScript:48195:47
Cesium</PrimitiveCollection.prototype.update@http://localhost:8000/ line 2 > injectedScript:135606:21
Cesium</OrderedGroundPrimitiveCollection.prototype.update@http://localhost:8000/ line 2 > injectedScript:135749:22
Cesium</PrimitiveCollection.prototype.update@http://localhost:8000/ line 2 > injectedScript:135606:21
Cesium</PrimitiveCollection.prototype.update@http://localhost:8000/ line 2 > injectedScript:135606:21
updateAndRenderPrimitives@http://localhost:8000/ line 2 > injectedScript:210443:29
executeCommandsInViewport@http://localhost:8000/ line 2 > injectedScript:210296:30
Cesium</Scene4.prototype.updateAndExecuteCommands@http://localhost:8000/ line 2 > injectedScript:210114:32
render@http://localhost:8000/ line 2 > injectedScript:210752:11
tryAndCatchError@http://localhost:8000/ line 2 > injectedScript:210766:24
Cesium</Scene4.prototype.render@http://localhost:8000/ line 2 > injectedScript:210818:23
Cesium</CesiumWidget.prototype.render@http://localhost:8000/ line 2 > injectedScript:212150:19
render2@http://localhost:8000/ line 2 > injectedScript:211593:20
FrameRequestCallback*render2@http://localhost:8000/ line 2 > injectedScript:211594:34

When I check positions in collection.entites.values outside forEach() method or leave console.log(new Cesium.Cartesian3.fromElements(position.x, position.y, position.z, result))
inside callback it shows that positions are 0 after first render and in next ones positions are undefined.

Any ideas how to do this correct?

2

Could be heaps of things, but a callback needs to refer to something that’s available for the lifetime of the callback. The scope of ‘position’ is lost after the conversion, so this is going to crash, like you experienced. Remember to only put globally accessible references inside your callbacks. If the ‘entity’ is globally accessible, move the ‘position’ conversion into the callback function.

The point of converting from static to dynamic is to gain some control over its position from somewhere, but that somewhere is never specified apart from local variables in the conversion process. Create your lookup table in global scope (ie. var myGlobalPositions = {}) and as you clone, convert first the positions (maybe based off the id of the entity);

myGlobalPositions[entity.id] = entity.polygon.hierarchy.getValue()
positionCB = new Cesium.CallbackProperty((time, result) => {
   return Cesium.Cartesian3.abs(myGlobalPositions[entity.id], result)
}

From now on you can update ‘myGlobalPositions[entity.id]’ with coordinate values, and the entity will follow suit.

Cheers,

Alex