geojson#GeoJsonProperties TypeScript Examples

private calculatePath = (stateVectors: IStateVectorData) => {

    const features: Array<Feature<Point, GeoJsonProperties>> = [];

    for (var stateVector of stateVectors.states) {

      // Setup last position time in ms
      var lastPositionTime = this.pathPredictionCounter

      // Setup altitude in m
      var altitude = stateVector.geo_altitude;
      if ((altitude === null) || (altitude < 0))
        altitude = stateVector.baro_altitude;
      if ((altitude === null) || (altitude < 0))
        altitude = 0;

      // Setup vertical rate
      var verticalRate = stateVector.vertical_rate ? stateVector.vertical_rate : 0.0;
      if (verticalRate < 0)
        verticalRate *= -1;

      const origin: Array<number> = [stateVector.longitude ? stateVector.longitude : 0, stateVector.latitude ? stateVector.latitude : 0]
      const velocity = stateVector.velocity ? stateVector.velocity : 0;

      var distance = (velocity * lastPositionTime) / 1000;

      // Try to adjust the distance to the vertical rate
      if (verticalRate !== 0)
        distance = distance - (verticalRate * (lastPositionTime / 1000));

      // Try to adjust the distance to the altitude
      if (altitude > 0)
        distance = (distance * earthRadius) / (earthRadius + altitude);

      const bearing = stateVector.true_track ? stateVector.true_track : 0;

      // Calculate the destination
      const feature = destination(
        origin,
        distance,
        bearing,
        {
          units: "meters"
        }
      );

      // Adding the ICAO24 prop to the feature so that a corresponding assignment is possible later
      var properties: GeoJsonProperties = {
        ['icao24']: stateVector.icao24
      };
      feature.properties = properties;

      // Push the feature to the collection
      features.push(feature);
    }

    // Increase counter time
    this.pathPredictionCounter += this.pathPredictionInterval;

    // Execute callbacks
    Object.entries(this.pathPredictionUpdatedSubscriberDictionary).forEach(([key, value], index) => value(features))
  };

AircraftLayer: React.FC<Props> = (props) => {

  // Fields
  const contextName: string = 'AircraftLayer'

  // External hooks
  const styleTheme = useTheme();

  // States
  const [featureCollection, setFeatureCollection] = useState<FeatureCollection | undefined>(undefined);
  const [pathPredictions, setPathPredictions] = useState<Array<Feature<Point, GeoJsonProperties>>>([]);

  // Contexts
  const systemContext = useContext(SystemContext)
  const geospatialService = systemContext.getService<IGeospatialService>('GeospatialService');

  // Refs
  const pathPredictionSubscriptionRef = useRef<string>('');

  // Effects
  useEffect(() => {

    // Mount
    if (geospatialService) {

      // Get a register key for the subscription and save it as reference
      const registerKey = geospatialService.onPathPredictionUpdated(contextName, handlePathPredictionUpdated);
      pathPredictionSubscriptionRef.current = registerKey;
    }

    // Unmount
    return () => {

      if (geospatialService) {

        geospatialService.stopPathPrediction();

        // Get the register key from the reference to unsubscribe
        const registerKey = pathPredictionSubscriptionRef.current;
        geospatialService.offPathPredictionUpdated(registerKey);
      }
    }
  }, []);
  useEffect(() => {

    createFeatureCollection(pathPredictions).then((featureCollection) => {

      setFeatureCollection(featureCollection);

      if (!geospatialService)
        return;

      if (props.stateVectors.states.length > 1000) {
        geospatialService.stopPathPrediction();
      }
      else {
        geospatialService.restartPathPrediction(props.stateVectors);
      }
    })



  }, [props.stateVectors]);
  useEffect(() => {

    createFeatureCollection(pathPredictions).then((featureCollection) => {

      setFeatureCollection(featureCollection);
    })

  }, [pathPredictions]);

  const handlePathPredictionUpdated = (destinations: Array<Feature<Point, GeoJsonProperties>>) => {
    setPathPredictions(destinations);
  };

  const createFeatureCollection = (pathPredictions: Array<Feature<Point, GeoJsonProperties>>) => {

    return new Promise<FeatureCollection>((res, rej) => {

      var featureCollection: FeatureCollection = {
        type: 'FeatureCollection',
        features: []
      };

      for (var stateVector of props.stateVectors.states) {

        if (!stateVector.latitude) {
          continue;
        }

        if (!stateVector.longitude) {
          continue;
        }

        // Get the index
        const index = props.stateVectors.states.indexOf(stateVector);

        // Check for selection
        var isSelected = false;
        if (props.selectedAircraft)
          isSelected = stateVector.icao24 === props.selectedAircraft.icao24;

        // Get callsign
        const callsign = stateVector.callsign ? stateVector.callsign : stateVector.icao24;

        // Get altitude
        var altitude = stateVector.geo_altitude;
        if ((altitude === null) || (altitude < 0))
          altitude = stateVector.baro_altitude;
        if ((altitude === null) || (altitude < 0))
          altitude = 0;

        // Get velocity in km/h
        const velocity = stateVector.velocity ? (stateVector.velocity * 3.6) : -1;

        // Get true track
        const trueTrack = stateVector.true_track ? stateVector.true_track : 0.0;

        // Get vertical rate
        const verticalRate = stateVector.vertical_rate ? stateVector.vertical_rate : 0.0;

        // Get is on ground
        const isOnGround = stateVector.on_ground;

        // Claculate color
        var color = getColor(altitude);
        if (isOnGround)
          color = styleTheme.palette.text.secondary;
        if (isSelected)
          color = styleTheme.palette.primary.main;

        var properties: GeoJsonProperties = {
          ['iconName']: getIconName(isOnGround, verticalRate, altitude, trueTrack),
          ['rotation']: getRotation(trueTrack, verticalRate, altitude),
          ['color']: color,
          ['isSelected']: isSelected,
          ['icao24']: stateVector.icao24,
          ['callsign']: callsign,
          ['altitude']: getFormattedValue(altitude, 1) + " m",
          ['velocity']: getFormattedValue(velocity, 1) + " km/h"
        }

        // Setup WGS84 coordinates
        var position: Position = [stateVector.longitude, stateVector.latitude];

        if (pathPredictions.length > 0) {

          const feature = pathPredictions.find(feature => feature.properties !== null && feature.properties['icao24']! === stateVector.icao24);
          if (feature)
            position = feature.geometry.coordinates;
        }

        var point: Point = {
          type: 'Point',
          coordinates: position
        };

        var feature: Feature<Point, GeoJsonProperties> = {
          type: 'Feature',
          id: `${index}.${stateVector.icao24}`,
          geometry: point,
          properties: properties
        }

        featureCollection.features.push(feature);
      }

      res(featureCollection);
    });

  };

  const getText = (): string | Expression | StyleFunction => {

    var text: string | Expression | StyleFunction = '';
    const simpleText = ["get", "callsign"] as Expression
    const detailedText = ['format',
      ["get", "callsign"], { "font-scale": 1.0 },
      "\n", {},
      ["get", "altitude"], { "font-scale": 0.75, "text-color": styleTheme.palette.text.primary },
      "\n", {},
      ["get", "velocity"], { "font-scale": 0.75, "text-color": styleTheme.palette.text.primary }
    ] as StyleFunction;

    if (props.zoom && props.zoom > 7)
      text = simpleText;
    if (props.zoom && props.zoom > 9)
      text = detailedText;

    return text;
  };

  const getSymbolLayout = () => {

    var showText = false;
    if (props.zoom && props.zoom > 7)
      showText = true;

    var isconSize = 1.0;
    if (props.zoom && props.zoom > 7)
      isconSize = 1.3;
    if (props.zoom && props.zoom > 9)
      isconSize = 1.6;

    const symbolLayout: SymbolLayout = {
      "icon-image": ["get", "iconName"],
      "icon-allow-overlap": true,
      "icon-rotate": ["get", "rotation"],
      "icon-size": isconSize,
      "text-field": showText ? getText() : '',
      "text-optional": true,
      "text-allow-overlap": true,
      "text-anchor": showText ? 'top' : 'center',
      "text-offset": showText ? [0, 1] : [0, 0]
    };

    return symbolLayout;
  };

  const getSymbolPaint = () => {

    var symbolPaint: SymbolPaint = {
      "icon-color": ["get", "color"],
      "text-color": ["get", "color"],
      "text-halo-width": 2,
      "text-halo-color": styleTheme.palette.background.default,
      "text-halo-blur": 2
    };

    return symbolPaint;
  };

  if (!props.stateVectors.states)
    return null;

  return (

    <Source
      type="geojson"
      data={featureCollection}>

      <Layer
        id={aircraftLayerId}
        type='symbol'
        source='geojson'
        layout={getSymbolLayout()}
        paint={getSymbolPaint()} />
    </Source>
  )
}