0

Is it possible to draw the great circle line in the OpenLayers 5 directly, without splitting the LineString into many small parts like https://openlayers.org/en/latest/examples/flight-animation.html?

Here is the problem of user experience related to the usage of the great circle line.

The Modify Feature(https://openlayers.org/en/latest/examples/modify-test.html?q=Test) is provided.

The number of the editable points in the great circle line is more than that in the direct line.

The user have to change more points because of the splitting method.

The possible solution, I guess, could be 1. restrict the editable points in the Modify 2. drag the editable points and then create the related great cirle points

Please advise me the possible api of OpenLayers 5 if exist or any other methods instead.

Thank you in advance.

pvii007
  • 3
  • 6

1 Answers1

2

If you style a direct line as a great circle geometry there will only be two points which can be modified:

var style = new ol.style.Style({
  geometry: function(feature) {
    var projection = map.getView().getProjection();
    var coordinates = feature.getGeometry().clone().transform(projection, 'EPSG:4326').getCoordinates();
    var coords = [];
    for (var i=0; i<coordinates.length-1; i++) {
      var from = coordinates[i];
      var to = coordinates[i+1];
      var arcGenerator = new arc.GreatCircle(
            {x: from[0], y: from[1]},
            {x: to[0], y: to[1]});
      var arcLine = arcGenerator.Arc(100, {offset: 10});
      arcLine.geometries.forEach(function(geom) { coords.push(geom.coords); });
    }
    var line = new ol.geom.MultiLineString(coords);
    line.transform('EPSG:4326', projection);
    return line;
  },
  stroke: new ol.style.Stroke({
    width: 4,
    color: 'red'
  })
});

var raster = new ol.layer.Tile({
  source:  new ol.source.OSM()
});

var vector = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: style
});

var map = new ol.Map({
  layers: [raster, vector],
  target: 'map',
  view: new ol.View({
    center: [0, 0],
    zoom: 2
  })
});

var draw = new ol.interaction.Draw({
  source: vector.getSource(),
  type: 'LineString',
  maxPoints: 3
});

var modify = new ol.interaction.Modify({
  source: vector.getSource(),
});

map.addInteraction(draw);
map.addInteraction(modify);
<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<script src="https://api.mapbox.com/mapbox.js/plugins/arc.js/v0.1.0/arc.js"></script>
<div id="map" class="map"></div>
Mike
  • 16,042
  • 2
  • 14
  • 30
  • Thank you for you kind reply. The waypoint source is added . Another problem occurs (https://codepen.io/pvii007/pen/gJeZZG) When moving the point, the one part of line disappear. – pvii007 May 24 '19 at 17:51
  • The problem occurs when the user click one point first and then drag the point. – pvii007 May 24 '19 at 18:02
  • I had only intended it for single segment routes, but have updated it now. The loop through the segments needs to be in the geometry function, instead of creating a feature for each segment. Also updated your pen https://codepen.io/anon/pen/vwRbva with the change and added an insert vertex condition (control key press is needed with mouse click) to make it harder to accidentally add new waypoints instead of moving an existing one, – Mike May 24 '19 at 19:06