Добавление полилиний с использованием листовки с включенной информацией о массиве

Question

Я очень начинающий и с Javascript, и с Leaflet, поэтому извиняюсь, если это легко исправить, или я получаю неверную терминологию ...

Я хочу нарисовать полилинии, используя листовки из CSV (которые я ввел и проанализировал с помощью Papaparse). Несмотря на то, что я могу нарисовать очень простые их версии, я не могу передать ни один из атрибутов из CSV (например, каждая ссылка содержит атрибуты, относящиеся к потоку трафика, которые в идеале я хотел бы символизировать.

Мой массив выглядит следующим образом:

Внутри которого у меня есть объекты, которые выглядят следующим образом (где display_links - это массив со всей моей информацией) image:

function showlinks(display_links) {

    display_links.forEach(function (item, index) {
        Origin = new L.LatLng(item.Lat1, item.Lng1);
        Dest = new L.LatLng(item.Lat2, item.Lng2);
        polylinePoints = [Origin, Dest]
        pLatLngs.push(polylinePoints)
    });

    var polylineOptions = {
    color: 'black',
    weight: 2,
    opacity: 0.9
    };

    polyline = new L.Polyline(pLatLngs, polylineOptions);
    map.addLayer(polyline);
};

Вероятно, есть более эффективный способ выполнить всю эту задачу (и моя неопытность с массивами и объектами не поможет), но я в основном создал новый массив только длинных значений, которые можно было бы прочитать с помощью листовки. Однако, когда я попытался получить более подробный массив большего размера с lat, long, ID и Total_Flow, код не запустился.

Любая помощь по этому вопросу будет принята с благодарностью, я ходил кругами уже несколько дней и просто никуда не денется ...

Answer 1

Такое ощущение, что вы делаете преждевременную оптимизацию (пытаясь нарисовать все в одной ломаной линии) или наивно думаете о своей структуре данных (предполагая, что сегменты всегда коррелируют).Вы столкнетесь с проблемами, как только два сегмента не будут относительными, или как только два соответствующих сегмента будут иметь разные атрибуты, например, разные Traffic_Flow.

Таким образом, канонический подход для минимально жизнеспособной программы будет состоять в том, чтобы нарисовать одинL.Polyline за пару точек:

display_links.forEach(function (item, index) {
    var origin = new L.LatLng(item.Lat1, item.Lng1);
    var dest = new L.LatLng(item.Lat2, item.Lng2);

    L.polyline([origin, dest]).addTo(map);
});

При желании можно использовать какой-либо другой атрибут из каждой строки для управления стилем L.Polyline через его параметры , например:

display_links.forEach(function (item, index) {
    var origin = new L.LatLng(item.Lat1, item.Lng1);
    var dest = new L.LatLng(item.Lat2, item.Lng2);

    var color:
    if (item.TotalFlow > 100) {
       color = 'red';
    } else {
       color = 'green';
    }

    L.polyline([origin, dest], { color: color }).addTo(map);
});

Или более короткая форма, такая как

L.polyline([origin, dest], { color: item.TotalFlow > 100 ? 'red' : 'green' }).addTo(map);

. Я бы рекомендовал вам , а не стремиться к эффективной обработке данных.С одной стороны, вы имеете дело только с 18 сегментами - с другой стороны, это потребует наличия данных в форме graph , а затем выполнит сжатие ребер на узлах, которые имеют только двасегменты, которые имеют все свои атрибуты.Вместо этого попросите исходные данные в формате, более подходящем для задачи, например, GeoJSON.