CODEWITHSUNDEEP
openlayers
Ali Hosein pour
Ali Hosein pour

Reputation: 338

How to display path on map with openlayers?

I have a path like this:

[53.994791502000055,32.87857732600003,141,53.99267829900003,32.95958344100006,126,53.98845189300005,32.99902989800006,124,53.998313507000034,33.01593552200006,120,54.04269077100008,33.07158320100007,109,54.05184798400006,33.06242598800003,109,54.07086681100003,33.00818711100004,109,54.04480397400005,32.98564627800005,113]

This path includes long, lat and z for each point. Also I have a map that created with OpenLayers. I want show this path on map. I tried different methods and instructions,but it is not shown. This is how I show my map:

var map = new ol.Map({
        controls: ol.control.defaults({
          attributionOptions: {
            collapsible: false
          }
        }).extend([mousePositionControl]),
        layers: layers,
        // Improve user experience by loading tiles while dragging/zooming. Will make
        // zooming choppy on mobile or slow devices.
        loadTilesWhileInteracting: true,
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([54.081, 32.908]),
          zoom: 13
        })
      });

I tested the display of part of the route this way but it didn't work:

routlayer = new ol.layer.Vector({
     source: new ol.source.Vector({
         features: [
             new ol.Feature({
                 geometry: new ol.geom.LineString([
      [53.9888, 32.8876],
      [54.1576, 32.9360]
])
             })
         ]

     })

 });


    map.addLayer(routlayer);

And I tried similar methods in different references, but it didn't work.

Upvotes: 0

Views: 2548

Answers (1)

cabesuon
cabesuon

Reputation: 5270

I think that you are missing the transformation from geographic coordinates to Web Mercator on the geometry of routlayer. If you fix that it should work.

Here you have a working example I made for you with the data of the post,

<!doctype html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
			#a { display: none; }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
    <title>OL - LineString From Coords</title>
  </head>
  <body>
    <h2>LineString From Coords</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      // tile layer
      var tile = new ol.layer.Tile({
        source: new ol.source.OSM()
      });
      // vector layer
      const coords = [53.994791502000055,32.87857732600003,141,53.99267829900003,32.95958344100006,126,53.98845189300005,32.99902989800006,124,53.998313507000034,33.01593552200006,120,54.04269077100008,33.07158320100007,109,54.05184798400006,33.06242598800003,109,54.07086681100003,33.00818711100004,109,54.04480397400005,32.98564627800005,113];
      let path = [];
      for(let i = 0; i < coords.length; i+=3) {
        path.push([coords[i], coords[i + 1], coords[i + 2]]);
      }
      const lineString = new ol.geom.LineString(path);
      lineString.transform('EPSG:4326', 'EPSG:3857');
      const feature = new ol.Feature({
        geometry: lineString
      });
      const source = new ol.source.Vector();
      source.addFeature(feature);
      var vector = new ol.layer.Vector({
        source,
        style: new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: 'red',
            width: 3
          })
        })
      })
      var map = new ol.Map({
        layers: [
          tile,
          //image,
          vector
        ],
        target: 'map',
        view: new ol.View({
          center: ol.proj.fromLonLat([54.081, 32.908]),
          zoom: 10
        })
      });
    </script>
  </body>
</html>

Upvotes: 2

Related Questions