OpenLayers 6中的LineString是否绘制了测地线？

问题描述

我正在绘制一些400公里长的线（Linestring）。中间点似乎并不完全应该在该位置，但是它很近（比如说3公里）。看起来Linestring没有绘制测地线。在文档中找不到任何可以说的方式。所以问题是：Linestring是否绘制了测地线，如果没有，我该如何做？

解决方法

如相关问题所示：Draw great circle line on the map directly in OpenLayers 5? 在@Mike的注释中引用，您可以设置绘制的线条的样式，以便使用通过arcGenerator（来自arc.js）计算的几何图形进行测地线测量：

new ol.style.Style({
  geometry: function(feature) {
    var projection = map.getView().getProjection();
    var coordinates = feature.getGeometry().clone().transform(projection,'EPSG:4326').getCoordinates();
    var from = coordinates[0];
    var to = coordinates[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
    });
    var coords = [];
    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: 2,color: 'blue'
  })
});

example

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

var styleSimple2ptLine = new ol.style.Style({
  geometry: function(feature) {
    var projection = map.getView().getProjection();
    var coordinates = feature.getGeometry().clone().transform(projection,color: 'blue'
  })
});

var coordsSimple = [ol.proj.fromLonLat([121.74940748038463,31.3038498266498]),ol.proj.fromLonLat([139.793414,35.599839])
];
const lineStr = new ol.Feature({
  geometry: new ol.geom.LineString(coordsSimple)
});
const vectorSource = new ol.source.Vector({
  features: [lineStr]
});
const vectorLayer = new ol.layer.Vector({
  source: vectorSource,style: styleSimple2ptLine
});

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

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

map.getView().fit(vectorSource.getExtent(),{
  padding: [50,50,50]
});

html,body {
  height: 100%;
  width: 100%;
  padding: 0px;
  margin: 0px;
}

.map {
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.4.3/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v6.4.3/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>