直接在 OpenLayers 5 中在地图上绘制大圆线？答案

【问题标题】：Draw great circle line on the map directly in OpenLayers 5?直接在 OpenLayers 5 中在地图上绘制大圆线？
【发布时间】：2019-05-24 04:07:48
【问题描述】：

是否可以直接在OpenLayers 5中绘制大圆线，而不将LineString分成许多小部分，例如 https://openlayers.org/en/latest/examples/flight-animation.html?

这里是大圆线使用相关的用户体验问题。

提供修改功能(https://openlayers.org/en/latest/examples/modify-test.html?q=Test)。

大圆线的可编辑点数多于直线。

由于拆分方法，用户必须更改更多点。

我想，可能的解决方案可能是 1.限制修改中的可编辑点 2.拖动可编辑点，然后创建相关的大圆点

如果存在，请告诉我 OpenLayers 5 的可能 api 或任何其他方法。

提前谢谢你。

【问题讨论】：

标签： openlayers openlayers-5

【解决方案1】：

如果您将直线设置为大圆几何图形，则只有两个点可以修改：

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>

【讨论】：

感谢您的热情回复。航路点源已添加。出现另一个问题(codepen.io/pvii007/pen/gJeZZG) 移动点时，线的一部分消失了。
用户先点击一个点再拖动点出现问题。
我只打算将它用于单段路线，但现在已经更新了。通过段的循环需要在几何函数中，而不是为每个段创建一个特征。还更新了您的笔codepen.io/anon/pen/vwRbva，并添加了一个插入顶点条件（需要通过鼠标点击控制键），以便更难意外添加新航点而不是移动现有航点，