1 votos

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

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?

0 votos

Encontré una respuesta en stackoverflow.com/questions/3852268/ . El código de decodificación ha funcionado como se esperaba.

0 votos

Si utiliza OpenLayers new ol.format.Polyline().readGeometry() decodifica una polilínea directamente a una cadena de líneas

0 votos

Gracias. Probé y esto funcionó como se esperaba

3voto

Bob Johnson Puntos 26

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.

0 votos

Utilicé los pasos devueltos por la api de google y los introduje en mi matriz de ubicaciones en el mismo orden. Aquí el problema es como, si una carretera es recta, pero tienen una curva a continuación, la api dado 2 puntos finales como lat / long y no el punto intermedio por lo tanto, la ruta exacta no se sigue. Pero la línea superior encriptada sigue lo mismo. Estoy usando la API de google a través de mi api usando la clave de google.

0 votos

Necesito mostrar un camino siguiendo la carretera para llegar al destino.

0 votos

He utilizado el siguiente enfoque: let l_data = this.FetchCoordinatesArrOL(argDirectionResponseModel.Locations); this._RouteDataLayer = new Vector({ source: new VectorSource({ features: [new Feature({ geometría: new LineString(l_data).transform('EPSG:4326', 'EPSG:3857'), name: 'RouteLayer' })] }), }); this.map.addLayer(this._RouteDataLayer);

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X