map.component.ts

import { Component, OnInit } from "@angular/core";
import Map from "ol/Map";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import View from "ol/View";
import { fromLonLat, toLonLat } from "ol/proj.js";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer.js";
import { MatDialog, MatDialogConfig } from "@angular/material/dialog";
import { FiltroDialogComponent } from "../filtro-dialog/filtro-dialog.component";
import Polyline, { encodeDeltas } from "ol/format/Polyline.js";
import { RouteConfigLoadEnd } from "@angular/router";
import VectorSource from "ol/source/Vector";
import Style from "ol/style/Style";
import Stroke from "ol/style/Stroke";
import Feature from "ol/Feature";

@Component({
  selector: "app-map",
  templateUrl: "./map.component.html",
  styleUrls: ["./map.component.sass"]
})
export class MapComponent implements OnInit {
  constructor(public dialog: MatDialog) {}

  ngOnInit() {
    this.initilizeMap();
  }

  initilizeMap() {
    const coord = [-13.1917, -41.7249];
    const coordenadasCodificadas = encodeDeltas(coord, 2);
    const polyline = coordenadasCodificadas;

    const route = new Polyline().readGeometry(polyline);

    const routeCoords = fromLonLat(coord);
    console.log("rotas", routeCoords);
    const routeFeature = new Feature({
      type: "route",
      geometry: route
    });

    const styles = {
      route: new Style({
        stroke: new Stroke({
          width: 6,
          color: [237, 212, 0, 0.8]
        })
      })
    };

    const vectorLayer = new VectorLayer({
      source: new VectorSource({
        features: [routeFeature] // talvez pode colocar as outras rotas
      }),
      style: function(feature) {
        return styles[feature.get("type")];
      }
    });
    new Map({
      target: "map",
      layers: [
        new Tile({
          source: new OSM()
        }),
        vectorLayer
      ],
      view: new View({
        center: fromLonLat([-13.1917, -41.7249]),
        zoom: 20
      })
    });
  }

  abreSelecaoDeFiltros() {
    let dialogConf = new MatDialogConfig();
    dialogConf.width = "600px";
    dialogConf.height = "60vh;";
    const dialogRef = this.dialog.open(FiltroDialogComponent, dialogConf);
  }
}