Javascript 使 Leaflet.FeatureGroup.SubGroup 工作，以便用户可以上传 CSV 文件并显示标记

我创建了一段使用CSV文件的代码，该文件被导入到项目文件夹中，以便它可以显示每个数据点的标记，同时创建标记簇和层.

我的代码运行得很好，但我的老板希望我添加一个函数，这样他就可以自己在界面上添加CSV文件.

我想出了另一个代码，这样他就可以添加CSV文件并显示标记，但我不知道如何将其应用于我已经拥有的代码，以便层和标记子组仍然有效.

以下是我的原始代码，运行得很好，我想保留它，只是添加了CSV文件上传功能:

    var engineerLayers = {}; // Create an object to hold the engineer marker cluster groups

    //this retrieves the file
    $.get('\practice.csv', function (csvString) {
      var data = Papa.parse(csvString, {
        header: true,
        dynamicTyping: true
      }).data;
      var parentGroup = L.markerClusterGroup();

      for (var i in data) {
        var row = data[i];
        var engineer = row.Engineer;

        if (!(engineer in engineerLayers)) {
          // Each overlay that should actually be a part of MCG
          // should be made as a Subgroup, with the MCG as their parent
          engineerLayers[engineer] = L.featureGroup.subGroup(parentGroup, []);
          controlLayers.addOverlay(engineerLayers[engineer], engineer);
        }

        var marker = L.circleMarker([row.Latitude, row.Longitude], {
          radius: 10,
          stroke: true,
          color: getColor(engineer),
          opacity: 1,
          weight: 1,
          fill: true,
          fillColor: getColor(engineer),
          fillOpacity: 0.5
        }).bindPopup('Plan File: ' + row.PFN + '</br>' + 'Engineer: ' + row.Engineer + '</br>' + ' Date Received: ' + row.Date_Received + '</br>' + 'Status: ' + row.Status);

        // Add the marker only to its overlay
        marker.addTo(engineerLayers[engineer]);
      }

      map.addLayer(parentGroup);
      controlLayers.addTo(map);
    });

    // Must change these if engineers ever change
    function getColor(engineer) {
      switch (engineer) {
        case 'Mike':
          return 'green';
        case 'Salar':
          return 'blue';
        case 'Diego':
          return 'purple';
        case 'Saul':
          return 'orange';
        case 'Chan':
          return 'red';
        default:
          return 'black';
      }
    }

下面是我编写的代码，允许用户上传CSV文件，然后打印数据:

    // Listen for file upload changes
    $('#csvFileUpload').change(function (e) {
      var file = e.target.files[0];
      var reader = new FileReader();

      // Read file contents
      reader.onload = function (e) {
        var csv = e.target.result;
        var markers = parseCSV(csv);

        // Add markers to the map
        markers.forEach(function (marker) {
          L.marker([marker.Latitude, marker.Longitude]).addTo(map)
            .bindPopup(marker.title);
        });
      };

      reader.readAsText(file);
    });

    // Parse CSV data into an array of objects
    function parseCSV(csv) {
      var lines = csv.split("\n");
      var result = [];
      var headers = lines[0].split(",");

      // Iterate through each line (excluding header) and create marker objects
      for (var i = 1; i < lines.length; i++) {
        var obj = {};
        var currentLine = lines[i].split(",");

        // Populate marker object with latitude, longitude, and title
        for (var j = 0; j < headers.length; j++) {
          obj[headers[j]] = currentLine[j];
        }

        result.push(obj);
      }

      return result;
    }

以下是我练习的几句话.csv:

PFN,Latitude,Longitude,Date_Received,District,Engineer,Status
0001-23-765-3000W,34.04395483,-118.1481822,1/23/2023,LA,Mike,Active
0002-23-3000W,34.04447045,-118.1509931,5/28/2003,Pomona,Salar,Not Active
0003-23NC,34.04271911,-118.1468947,9/30/1983,LA,Saul,Active
004-23-404-406,34.04264799,-118.1487937,2/2/1964,Pomona,Diego,Not Active
406,34.04210569,-118.1501992,6/6/1944,LA,Mike,Active
1249-23NC,34.0901146,-118.1486999,10/9/1924,Pomona,Salar,Not Active
1250-23NC,34.08822204,-118.151189,2/11/1905,LA,Saul,Active

UPDATE: My code now works great thanks to Ghybs answer, but for whatever reason, my code keeps creating a layer called undefined. I noticed in my previous code that an undefined layer would be created if a file with extra line spaces were included. Is there anyway to get rid of this so that the code is only reading the file with words on it rather then the extra space at the end? Here's what it looks like:

我只是在函数中添加了以下几行，它停止读取最后一行:

    // Read file contents
  reader.onload = function (e) {
    var csv = e.target.result;
    var lines = csv.split("\n");
    var csvWithoutLastLine = lines.slice(0,-1).join("\n");
    parseCsv(csvWithoutLastLine);
    // Parse, build Markers and populate Layer Groups
    //parseCsv(csv);
  };

  reader.readAsText(file);
});