使用包含数组信息的传单添加折线

Question

我是Javascript和Leaflet的初学者，因此很抱歉，如果这很容易解决，或者我使用的术语不正确...

我正在寻找使用csv的传单绘制折线的方法（我已经引入并使用Papaparse对其进行了解析）。虽然我可以画出非常基本的版本，但我无法传递csv的任何属性（例如，每个链接都包含与流量相关的属性，我希望将其象征化。）

我的数组如下：

在其中具有如下外观的对象（其中display_links是包含我所有信息的数组）图像：

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);
});

虽然可以选择使用每行中的某些其他属性来通过its options控制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形式的数据，然后在只有两个共享所有段的段的节点上执行edge contraction属性。而是以更适合任务的格式要求原始数据，例如GeoJSON。