Class ShapeProvider

A ShapeProvider allows you to map Feature from a single model into different geometric representations. It is used by a FeatureLayer.

A common use case is to visualize a model on both a geographic map and a cartesian chart.

For example, a ShapeProvider helps you display trajectories on a geodetic map in one layer, and display same trajectories on a vertical chart in another layer.

class TrajectoryShapeProvider extends ShapeProvider {
  constructor() {
    super();
    this.reference = createCartesianReference({
      xUnitOfMeasure: meterUnit,
      yUnitOfMeasure: meterUnit
    });
  }

  provideShape(trajectoryFeature: Feature) {
    const shape = trajectoryFeature.shape as any as Polyline;
    if (!shape || !shape.reference) {
      return null;
    }

    // Creates a cartesian shape for the passed trajectory feature,
    // where the x-coordinates represent the distance along the trajectory, and the y-coordinate represents the altitude of the aircraft at that point.
    const geodesy = createEllipsoidalGeodesy(shape.reference);
    const points: Point[] = [];

    // for each of the points in the original trajectory calculate the distance from the first point using
    // the geodesy instance. This gives us the x-coordinate of the resulting shape
    // The height is directly available in the z-coordinate of the points of the original trajectory
    let distance = 0;
    let point0 = shape.getPoint(0);
    points[0] = createPoint(this.reference, [0, point0.z]);

    for (let i = 0; i < shape.pointCount; i++) {
      const nextPoint = shape.getPoint(i);
      distance += geodesy.distance(point0, nextPoint, LineType.SHORTEST_DISTANCE);
      points.push(createPoint(this.reference, [distance, nextPoint.z]))
      point0 = nextPoint;
    }
    return createPolyline(this.reference, points);
  }
}

Copy

Example for a ShapeProvider that provides shapes asynchronously.

class AsyncShapeProvider extends ShapeProvider {
  private readonly shapeCache: Map<string|number, Shape>
  private readonly shapePromise: Map<string|number, Promise<Shape>>;
  constructor() {
    super();
    this.shapeCache = new Map();
    this.shapePromise = new Map();
  }

  provideShape(feature: Feature) {
    const shape = this.shapeCache.get(feature.id);
    if (shape) {
      // Shape was already resolved
      return shape;
    }

    if (!this.shapePromise.get(feature.id)) {
      // Invoke a function that provides shapes asynchronously
      const promiseForShape = getAsyncShape(feature);
      this.shapePromise.set(feature.id, promiseForShape);

      // When the promise is resolved cache the shape and invalidate itself
      promiseForShape.then((shape) => {
        this.shapeCache.set(feature.id, shape);
        this.shapePromise.delete(feature.id);
        // Invalidate self to provide the resolved shape
        this.invalidateById(feature.id);
      });
    }

    // The feature will not be drawn till its shape is resolved
    return null;
  };
}

Copy