Utilizar el resultado de la API de Google Direction para mostrar la ruta en OpenLayers

Question

Necesito mostrar la ruta entre 2 puntos en OpenLayers. He recibido los detalles de la ruta desde la API de Google Directions. La API ha dado ubicación de inicio / ubicación final, Pasos y datos overlay_polyline (codificados).

El overlay_polyline muestra la ruta correcta usando la url ' https://developers.google.com/maps/documentation/utilities/polylineutility ', pero como esto está encriptado extraje las coordenadas de la matriz Steps como lat/long y añadí una capa vectorial en el mapa de OpenLayers, pero de esta manera muchos puntos quedan en medio y la curvatura de la carretera no se considera.

Salida de mi API (que formatea la salida de la API de Directions):

{
  "end_address": "100 Universal City Plaza, Universal City, CA 91608, USA",
  "end_location": {
    "lat": 34.1358593,
    "lng": -118.3511633
  },
  "start_address": "1313 Disneyland Dr, Anaheim, CA 92802, USA",
  "start_location": {
    "lat": 33.8160897,
    "lng": -117.9225226
  },
  "distance": {
    "text": "35.1 mi",
    "value": 56511
  },
  "duration": {
    "text": "49 mins",
    "value": 2924
  },
  "Locations": [
    {
      "lat": 33.8160897,
      "lng": -117.9225226
    },
    {
      "lat": 33.8160679,
      "lng": -117.9225314
    },
    {
      "lat": 33.8155824,
      "lng": -117.9235917
    },
    {
      "lat": 33.816278,
      "lng": -117.9242395
    },
    {
      "lat": 33.817613,
      "lng": -117.924097
    },
    {
      "lat": 33.8179964,
      "lng": -117.9235637
    },
    {
      "lat": 33.8179846,
      "lng": -117.9223305
    },
    {
      "lat": 33.8207878,
      "lng": -117.9230963
    },
    {
      "lat": 34.0256221,
      "lng": -118.2059515
    },
    {
      "lat": 34.1294658,
      "lng": -118.3475583
    },
    {
      "lat": 34.1307998,
      "lng": -118.3485738
    },
    {
      "lat": 34.1338819,
      "lng": -118.3515888
    },
    {
      "lat": 34.1358593,
      "lng": -118.3511633
    }
  ],
  "overview_polyline": {
    "points": "qukmEvvvnUz@l@\\n@H|@KvAI`BsB@Ee@O?e@BoAC_@H}@?_@??S?_@?ACCe@_@[OGm@BiEAs@_@Bm@HyEhAaC|@eCv@eF_BgB]wAHmAb@oJdIeCxB}@nAmI~H{JtKgOfPg@b@qDnGsAvDoAvEeC~PeBhKoAhEqDrIwa@b_AyCzGyBdEqFnJqB~DeFxMiOh_@gVdk@oCxEiD~EgDpEkHhKa@x@wAxDc@nBcDzNaDxNkCbIgFfL_JrOmG~M{MxZkN~ZgC`GiFjLaDpGgDzEkDbEiE|FqBlDgIzQoRlc@aIrQuEjK{CrGaD`GmDbHcCnG}GhNaUnj@kDhIwBrFaK|TkG`MqRp`@iEdJoC|GkBfE_GpL_FfIuFtH}GrHySlSuE|EmEjGgFjKwFxLeHfK{FrGqC|BmFvDyIvF}D`Cuu@be@ySvN{ThNe\\fRo]fSmR~KoNrIkDzCeCrC{I|Mu^xj@gSxZyAbBmC`C}AfA{DvBoC~@sNzC_L`CaFdAoEpAsHxDqM~IyCzBuCjCeGfGgShS{H`IyCnEoD~FyB~CgCfCkElEom@tk@{DjC}BhAmCvAqDjCkVbUsCvCoH`JuGjIuF~JeE`FwF`FgA`AcCvCkChFyBfG{JhY}AdFuAnHo@rCw@rBuBhEMTy@jBcMp^}BjH[pAqAjJWrI@zo@m@nJu@vEgAbEuJ~YkHrTsD`Lq@pC@h@}BzI}Mn`@wF~O}DjJqDzFoAzA]PiChC{C|BwBbAgFdAeDDsGk@qHTsEK_Dg@aKw@wJDuFRwCXqDr@gEtAoEjBsItDkBnBiAfCc@~Bg@bHyCp]a@|Ge@zKPtFWhCa@jBu@rBqChFoLrTgEjHyF`IoFbFgKpIeDrCkEbG_NzSaDnHcB`GkK~a@sFhQ_DlJwChJ_CfHkCtGmDfMqGx\\wE~ZuBlP_BjLwAbGiAzCkGzNmJnWcDlHcOxVeDbFcCrCqFjE{MdHwBjA_C`BiCpCoAnB_HhMcDnFkB|BqE`EcEfCuOvHsDlBkBxAiBrB{B~Dy@`Cs@zCa@pDKlFInGe@vEYtAwAfEeFxJ{M`XkDzGeAzAqDtD{AhAqAl@sCt@qLxCoRpDeErAmD`BaEbCqC~BqEzEaBnB}FnHmB|BkBdBsG|DcElDsFvFkCdCM?qBdB_ChB_IdFmDdFiA~@gA~ASBe@KiB_AcAU_BKo@@"
  }
}

Hay una diferencia para otras búsquedas cuando dibujo una línea usando la matriz de ubicaciones y usando overview_polyline en la polylineutility. overview_polyline es preciso.

¿Hay alguna forma mejor de mostrar la ruta en OpenLayersor? ¿Cómo puedo utilizar esta propiedad overlay_polyline en OpenLayers?

Answer 1

Puede decodificar las polilíneas directamente en OpenLayers para crear una serie de características LineString (que también podrían combinarse como una única geometría MultiLineString)

result.routes[0].legs.forEach(function(leg) {
    leg.steps.forEach(function(step) {
        googleRouteLayer.getSource().addFeature(
            new ol.Feature({
                geometry: new ol.format.Polyline().readGeometry(step.polyline.points).transform('EPSG:4326', viewProjection)
            })
        );
    });
});

No debes utilizar las rutas de Google en mapas de acceso público que no sean de Google, ya que las condiciones de servicio de Google lo prohíben.