Показать несколько отличных кругов на mapbox с помощью turf.js

Я пытаюсь добавить несколько линий большого круга между маркерами в одном контейнере карты. Мне удалось показать один с помощью greatCircle в turf.js.

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.


javascript mapbox-gl-js geojson turfjs
person MDB    schedule 16.03.2021    source источник
comment
Извините, перечислите все что? Что вы имеете в виду множественные траектории?   -  person Steve Bennett    schedule 17.03.2021
comment
Привет, Стив, да, все траектории, перечисленные в geojson, и примените greatCircle к каждой из них. См. Также JsFiddle.   -  person MDB    schedule 17.03.2021

Ответы (1)


arrow_upward
0
arrow_downward

Дайте map.addSource новый FeatureCollection, где особенности - большие круги из функции дерна. Для этого в turf есть вспомогательная функция.

Я включил логику вашего цикла в функцию, которая возвращает 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"
    }
  });
});

Обновление скрипки с использованием этой логики дает:

введите описание изображения здесь

Это немного сложно разобрать на скриншоте, но есть отдельные большие круги между тем, что я вижу как Лондон в Нью-Йорк и, может быть, из Лондона в Бостон?

person Robin Mackenzie    schedule 24.03.2021
comment
Привет, Робин, это действительно хорошо и именно то, что я искал! Спасибо большое за вашу помощь! - person MDB; 14.04.2021
comment
Не стесняйтесь принимать / голосовать, если это соответствует вашим требованиям - есть зеленая кнопка с галочкой, которую вы можете нажать - person Robin Mackenzie; 14.04.2021