Question

是否可以直接在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（如果存在）或其他任何方法。

谢谢。

Answer 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>

Answer 2

感谢您的亲切答复。

添加了航点源。发生另一个问题

当用户先单击一个点然后拖动该点时，线的一部分可能会消失。

function getWaypointSource(){
  // Shanghai - Tokyo
  var waypoints1=[[121.74940748038463,31.3038498266498],[122.06092139763958,31.164067940702065],[122.06092139763958,31.164067940702065],[122.64074479735022,31.22504054564625],[122.64074479735022,31.22504054564625],[129.71339451457666,33.875146573731165],[129.7321074760988,33.881542246917626],[130.70933042215282,33.941847450238036],[130.84619476690239,33.9307769429218],[131.65566293633236,33.648675934705636],[131.70786867033618,33.6143763336296],[131.71057643403194,33.611938252246944],[132.64119860146553,32.71425295987349],[132.72621304824227,32.68188711019257],[132.80599619848533,32.667661216749266],[132.96111819899093,32.651357237513245],[135.69469840520944,33.1695303852008],[135.89755926333956,33.23544387360199],[138.87863265162528,34.57025626505231],[139.6806395260348,35.14259093116956],[139.73472637566007,35.216624701486566],[139.74783219117438,35.250965736797234],[139.793414,35.599839]];
  // Tokyo - Mazatlan
var waypoints2=[[139.793414,35.599839],[139.7866953085557,34.95238928620567],[139.7932190790438,34.94341008645255],[139.83581401395531,34.8999276941446],[139.86133246606346,34.885194608950655],[139.95666519455847,34.85823400475112],[248.3832370206125,22.587736538423403],[248.74301005136095,22.549922869157374],[249.19228897633727,22.565554260740843],[249.77313697018346,22.595795939565313],[253.5684859071874,23.14757592277051],[253.5684859071874,23.14757592277051],[253.58277800000002,23.190278]];
  var waypoints = waypoints1;

  // use Tokyo- Mazatlan instead
  // waypoints=waypoints2;

  function buildFeatures(waypoints){
  let features=[]
  for(let i = 0 ;i<waypoints.length-1;i++){
    let from =waypoints[i];
    let to = waypoints[i+1];
    let geometry = new ol.geom.LineString([from,to]);
    geometry.transform('EPSG:4326', 'EPSG:3857');
    features.push(new ol.Feature({geometry}))
  }
  return features;
}
var features=buildFeatures(waypoints);
var waypointSource = new ol.source.Vector({features:features});
  return waypointSource;
}
var waypointSource=getWaypointSource();
/////////////////////////////////////////////////////////
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 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: 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(),
  source:waypointSource,// use waypointSource instead
  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: 2
});

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://codepen.io/pvii007/pen/gJeZZG

Here is the snapshot

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

2 个答案: