使用 turf.js 在 mapbox 上显示多个大圆圈

Question

我正在尝试在同一个 map 容器中的标记之间添加多条大圆线。 我设法在 turf.js 中用greatCircle展示了一个。

for(var i = 0; i < 2 ;i++) {

    var getStart = json.features[0].geometry.coordinates[0];
    var getEnd = json.features[0].geometry.coordinates[1];

    //console.log(getStart) 
    //console.log(getEnd)

    var start = turf.point(getStart);
    var end = turf.point(getEnd);

    var data = turf.greatCircle(start, end);

    console.log(data) 
}

是否可以列出所有这些并应用 Turf.js？

这是我的JsFiddle 。

Answer 1

给map.addSource一个新的FeatureCollection ，其中的特征是来自草皮 function 的大圆圈。 为此，草坪上有一个助手 function 。

我已经将你的循环逻辑包含在一个 function 中，它返回一个大圆圈的FeatureCollection ：

function getGreatArcFc() {
  var data = [];
  for (var i = 0; i < json.features.length; i++) {
    var feature = json.features[i];
    var getStart = feature.geometry.coordinates[0];
    var getEnd = feature.geometry.coordinates[1];
    var start = turf.point(getStart);
    var end = turf.point(getEnd);
    data.push(turf.greatCircle(start, end));
  }
  return turf.featureCollection(data);
}

map.on('load', function() {
    map.addSource('route', {
        "type": "geojson",
        "data": getGreatArcFc()
    });
  map.addLayer({
    "id": "route",
    "source": "route",
    "type": "line",
    "paint": {
      "line-width": 1,
      "line-color": "#000000"
    }
  });
});

用这种逻辑更新你的小提琴会给出：

在屏幕截图中有点难以辨认，但在我看到的伦敦到纽约和伦敦到波士顿之间可能有单独的大圆圈？