Javascript Openlayers Polyline Problem - Straight Line

Question

I have following Polyline: https://pastebin.com/ktcNGRWg

With following code:

        this.map = new Map({
            target: 'map',
            layers: [
              new TileLayer({
                source: new OSM({ crossOrigin: null })
              }),
            ],
            view: new View({
              center: olProj.fromLonLat([7.0785, 51.4614]),
              zoom: 2
            })
        });



        const polyline = data.polyline;
   
        const route = new Polyline({
          factor: 1e5,
        }).readGeometry(polyline, {
          dataProjection: 'EPSG:4326',
          featureProjection: 'EPSG:3857',
        });
    
        const routeFeature = new Feature({
          type: 'route',
          geometry: route,
        });
       
   
        const styles = {
          'route': new Style({
            stroke: new Stroke({
              width: 2,
              color: [5, 22, 77, 1],
            }),
          }),
          'icon': new Style({
            image: new Icon({
              anchor: [0.5, 1],
              src: 'data/icon.png',
            }),
          }),
        };
    
        const vectorLayer = new VectorLayer({
          source: new VectorSource({
            wrapX: true,
            features: [routeFeature],
          }),
          style: function (feature) {
            return styles[feature.get('type')];
          },
        });
    
      
       this.map.addLayer(vectorLayer);

I will get this map:

but the export from FR24 is displayed original this:

i tried things with wrapx like its mentioned on other posts. how is it possible to get a similar result like FR24?

Mike · Accepted Answer · 2023-06-14 11:30:06Z

To display the required output you will need the great circle route for seach segment of the polyline. There is a third party utility for great circle used in https://openlayers.org/en/latest/examples/flight-animation.html which could also be used here

    const route = new Polyline({
      factor: 1e5,
    }).readGeometry(polyline);

    const coordinates = [];

    route.forEachSegment(function(start, end) {
      const arcGenerator = new arc.GreatCircle(
        {x: start[0], y: start[1]},
        {x: end[0], y: end[1]}
      );
      const arcLine = arcGenerator.Arc(100, {offset: 10});
      arcLine.geometries.forEach(function (geometry) {
        coordinates.push(geometry.coords);
      });
    });

    const routeFeature = new Feature({
      type: 'route',
      geometry: new MultiLineString(coordinates).transform('EPSG:4326', 'EPSG:3857'),
    });

Your pastebin link is not working so I have not been able to test with your data.

Collectives™ on Stack Overflow

Javascript Openlayers Polyline Problem - Straight Line

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related