2

I try to display routing path on OpenLayers map, but the path is rendering wrong. Back-end returned encoded polylines are displayed in Africa, but it should be in Poland (image below).

enter image description here

I tried to modify example code from OpenLayers map website (http://openlayers.org/en/latest/examples/feature-move-animation.html).

My code:

import Feature from 'ol/Feature.js';
import Map from 'ol/Map';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import Polyline from 'ol/format/Polyline';
import Point from 'ol/geom/Point.js';
import VectorSource from 'ol/source/Vector.js';
import {Group as LayerGroup, Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {Circle as CircleStyle, Fill, Icon, Stroke, Style} from 'ol/style.js';
import Projection from 'ol/proj/Projection';
      var polyline = [
            "wcauHspjbBBC@G@G?GAGAECECAG?I@m@HE@", 
        "cfauHcrjbBuPoEc\\_GiSiOhCg^bNea@pb@bK|b@hRx^|Ndj@bBzO~Sz]ff@`YhRpYqG",
        "y~ztHayibBKIIIa@]EAC@]x@ABGPMVGPABUl@M^Sj@Qv@MIOIGCECVwAFe@Di@DyA@]@k@?C", 
        "{d{tHo|ibB}F~iAg\\`d@_]jV}b@eI",
        "_l~tHo~ebBl@?n@A`Ca@bAAt@l@bAl@Ct@R|KBjAFzAAhB@jA"
         ].join('');

        var route = /** @type {module:ol/geom/LineString~LineString} */ (new Polyline({
            factor: 1e6
        }).readGeometry(polyline, {
            dataProjection: 'EPSG:4326',
            featureProjection: 'EPSG:3857'
        }));

        console.log(route);

        var routeCoords = route.getCoordinates();
        var routeLength = routeCoords.length;

        var routeFeature = new Feature({
            type: 'route',
            geometry: route
        });

        var styles = {
            'route': new Style({
            stroke: new Stroke({
                width: 6, color: [24, 170, 13, 0.8]
            })
            }),
            'icon': new Style({
                image: new Icon({
                    anchor: [0.5, 1],
                    src: 'data/icon.png'
                })
            }),
            'geoMarker': new Style({
                image: new CircleStyle({
                    radius: 7,
                    fill: new Fill({color: 'black'}),
                    stroke: new Stroke({
                    color: 'white', width: 2
                    })
                })
            })
        };

        var vectorLayer = new VectorLayer({
            source: new VectorSource({
                features: [routeFeature]
            }),
            style: function(feature) {
                return styles[feature.get('type')];
            }
        });

        this.map.addLayer(vectorLayer);

        var geoMarker = new Feature({
            type: 'geoMarker',
            geometry: new Point(routeCoords[0])
        });
1

The encoded line contains wrong coordinates. It seems they have precision of variable length, which is wrong. The display is consistent with the data, using a numerical precision of 6, and the use of other precision doesn't resolve the entire issue. You would have to review how the line is encoded.

select precision, st_xmin(geom), st_xmax(geom), st_ymin(geom), st_ymax(geom)
from (select generate_series(1,10) as precision) a,
lateral (select ST_LineFromEncodedPolyline('wcauHspjbBBC@G@G?GAGAECECAG?I@m@HE@cfauHcrjbBuPoEc\\_GiSiOhCg^bNea@pb@bK|b@hRx^|Ndj@bBzO~Sz]ff@`YhRpYqGy~ztHayibBKIIIa@]EAC@]x@ABGPMVGPABUl@M^Sj@Qv@MIOIGCECVwAFe@Di@DyA@]@k@?C{d{tHo|ibB}F~iAg\\`d@_]jV}b@eI_l~tHo~ebBl@?n@A`Ca@bAAt@l@bAl@Ct@R|KBjAFzAAhB@jA',precision) as geom) b;


 precision |   st_xmin   |   st_xmax    |   st_ymin    |   st_ymax
-----------+-------------+--------------+--------------+--------------
     1 |      162793 |    1503163.2 |     508013.6 |    1849438.8
     2 |     16279.3 |    150316.32 |     50801.36 |    184943.88
     3 |     1627.93 |    15031.632 |     5080.136 |    18494.388
     4 |     162.793 |    1503.1632 |     508.0136 |    1849.4388
     5 |     16.2793 |    150.31632 |     50.80136 |    184.94388
   **6 |     1.62793 |    15.031632 |     5.080136 |    18.494388
     7 |    0.162793 |    1.5031632 |    0.5080136 |    1.8494388
     8 |   0.0162793 |   0.15031632 |   0.05080136 |   0.18494388
     9 |  0.00162793 |  0.015031632 |  0.005080136 |  0.018494388
    10 | 0.000162793 | 0.0015031632 | 0.0005080136 | 0.0018494388

If we print the line as text, using a precision of 6 (as in your code), we get coordinates that match the map display.

LINESTRING(1.62793 5.08014,
1.627932 5.080138,
1.627936 5.080137,
1.62794 5.080136,
1.627944 5.080136,
1.627948 5.080137,
1.627951 5.080138,
1.627954 5.08014,
1.627955 5.080142,
1.627955 5.080146,
1.627954 5.080151,
1.627949 5.080174,
1.627948 5.080177,
3.255902 10.160355,
3.256006 10.160638,
3.255991 10.161104,
3.256316 10.161232,
3.256247 10.161493,
3.256005 10.161993,
3.255436 10.16254,
3.254861 10.162346,
3.254352 10.162037,
3.253661 10.161782,
3.253391 10.161732,
3.252897 10.161396,
3.25248 10.160768,
3.252055 10.160459,
8.329044 10.160596,
8.32905 11.788149,
8.329055 11.788154,
8.329072 11.788159,
8.329075 11.788174,
8.329077 11.788175,
8.329092 11.788174,
8.329093 11.788145,
8.329097 11.788143,
8.329104 11.788134,
8.329108 11.788122,
8.329109 11.788113,
8.32912 11.788111,
8.329127 11.788088,
8.329137 11.788072,
8.329146 11.78805,
8.329153 11.788022,
8.329161 11.788027,
8.329165 11.788032,
8.329168 11.788034,
8.329156 11.788036,
8.329152 11.78808,
8.329149 11.788099,
8.329146 11.78812,
8.329145 11.788165,
8.329144 11.78818,
8.329144 11.788202,
13.40623 11.788204,
13.406357 13.415812,
13.406825 13.414612,
13.406232 13.414597,
13.405858 13.415077,
13.406021 13.415652,
15.031613 18.494388,
15.031613 18.494364,
15.031614 18.49434,
15.031631 18.494276,
15.031632 18.494242,
15.031609 18.494216,
15.031586 18.494182,
15.031559 18.494184,
15.031352 18.494174,
15.031314 18.494172,
15.031268 18.494168,
15.031215 18.494168,
15.031177 18.494168)

Using a precision of 5, the beginning of the coordinates are in Poland but the remaining are way off:

LINESTRING(16.2793 50.8014,
16.27932 50.80138,
16.27936 50.80137,
16.2794 50.80136,
16.27944 50.80136,
16.27948 50.80137,
16.27951 50.80138,
16.27954 50.8014,
16.27955 50.80142,
16.27955 50.80146,
16.27954 50.80151,
16.27949 50.80174,
16.27948 50.80177,
32.55902 101.60355,
32.56006 101.60638,
32.55991 101.61104,
32.56316 101.61232,
32.56247 101.61493,
32.56005 101.61993,
32.55436 101.6254,
32.54861 101.62346,
32.54352 101.62037,
32.53661 101.61782,
32.53391 101.61732,
32.52897 101.61396,
32.5248 101.60768,
32.52055 101.60459,
83.29044 101.60596,
83.2905 117.88149,
83.29055 117.88154,
83.29072 117.88159,
83.29075 117.88174,
83.29077 117.88175,
83.29092 117.88174,
83.29093 117.88145,
83.29097 117.88143,
83.29104 117.88134,
83.29108 117.88122,
83.29109 117.88113,
83.2912 117.88111,
83.29127 117.88088,
83.29137 117.88072,
83.29146 117.8805,
83.29153 117.88022,
83.29161 117.88027,
83.29165 117.88032,
83.29168 117.88034,
83.29156 117.88036,
83.29152 117.8808,
83.29149 117.88099,
83.29146 117.8812,
83.29145 117.88165,
83.29144 117.8818,
83.29144 117.88202,
134.0623 117.88204,
134.06357 134.15812,
134.06825 134.14612,
134.06232 134.14597,
134.05858 134.15077,
134.06021 134.15652,
150.31613 184.94388,
150.31613 184.94364,
150.31614 184.9434,
150.31631 184.94276,
150.31632 184.94242,
150.31609 184.94216,
150.31586 184.94182,
150.31559 184.94184,
150.31352 184.94174,
150.31314 184.94172,
150.31268 184.94168,
150.31215 184.94168,
150.31177 184.94168)
  • Thanks for your answer. It works! In my case I have to add encoded polylines separately by loop. – Krzysztof Sep 30 '18 at 21:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.