Polyline Implementation

This implementation supports Polyline to be rendered in the Map.

Overview

The goal of this implementation is to help understand how to draw a polyline on a map area. The HNOD renderer is enhanced to draw the polyline and support the Line Geometry.

Adding polylines to the map

The service is defined in the file proto/polyline.proto. MapViewService with method ShowCustomPolylines

public showCustomPolylines(
    request: Observable<fs1.core.v1.map.PolylinesUpdateRequest>
  ): Promise<google.protobuf.Empty> {
    request.subscribe((req) => this.getState(req.viewId).polyLines.next(req.polylines));
    return Promise.resolve({});
  }

  public polylines(request: fs1.core.v1.map.PolylinesRequest): Observable<fs1.core.v1.map.PolylinesUpdate> {
    return this.getState(request.viewId).polyLines.pipe(map((polylines) => ({ polylines })));
  }

MapViewServiceClient is updated with function to connectMapPolyLines

private connectMapPolyLines() {
    return this.client
      .polylines({ viewId: this.viewId }, this.metadata)
      .pipe(
        map((polylines) => polylines.polylines.map((polyline) => new MapViewLineFeature(chunk(polyline.latlong, 2))))
      )
      .subscribe((features) => {
        if (features.some((f) => f.coordinates.some((c) => c.length > 0))) {
          this.api.addFeatures(...features);
        } else {
          this.api.removeAllFeatures();
        }
      });
  }

To use the polyline method you need to call the showCustomPolyline inside the mapview service and pass a list of coordinaties that will eventually form a line, see example below

line1 = [[13.404676999274196, 52.519891174618955],[13.40477, 52.51994]]
line2 = [[13.40477, 52.51994],[13.40483023126904, 52.5199019591985]];
mapViewService.showCustomPolyline(of({
    viewId: fs1.core.v1.map.ViewId.Main, polylines: [
        { lonlat: line1.flat() },
        { lonlat: line2.flat() }
    ]
}));
Polyline on the map
Figure 1. Polylines on the map in Pink

results matching ""

    No results matching ""