Draw great circle line on the map directly in OpenLayers 5?

问题

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.

回答1:

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>

来源：https://stackoverflow.com/questions/56285745/draw-great-circle-line-on-the-map-directly-in-openlayers-5

标签

OpenLayers

openlayers-5