使用Leaflet Omnivore用CSV文件中的动态纬度和经度替换硬编码纬度和经度

Question

我找到了一个喜欢使用的函数，但是Lat和Long数据被硬编码在JavaScript文件中。我想使用Leaflet Omnivore用CSV文件中的动态脚本（纬度和经度）替换硬编码脚本。这将使我的数据可以通过CSV轻松更新。下面是我到目前为止的脚本。我可以在不使用函数的情况下绘制点，但是我真的很喜欢该函数提供的重叠标记的Spiderfy功能。该功能可以很好地处理硬编码的代码，但不能，但是不能与我到目前为止尝试的任何方法一起使用。下面提供了我的最新尝试。任何建议/解决方案将不胜感激。

var cityCluster = omnivore.csv('data/cityName.csv')
.on('ready', function (layer) {
    this.eachLayer(function (marker) {
        //Load Icons from CSV file
        var customIcon = L.icon({
            iconUrl: 'graphic/' + marker.toGeoJSON().properties.graphic2, //add graphic from CSV file
            className: marker.toGeoJSON().properties.cityName,
            //className: 'mapIcons',
            iconSize: [12, 12], //size of the icon in pixels
            iconAnchor: [6, 12], //point of the icon which will correspond to marker's location (the center)
            popupAnchor: [0, -10] //point from which the popup should open relative to the iconAnchor
        });
        //change the icons for each point on the map
        marker.setIcon(customIcon);

        var popupText =
            marker.bindPopup('<strong>' + marker.toGeoJSON().properties.cityName + '</strong>' + ', ' + '</br>' + marker.toGeoJSON().properties.discrip + "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='" + marker.toGeoJSON().properties.popup + "'   title='" + marker.toGeoJSON().properties.discrip + " '  href='graphic/" + marker.toGeoJSON().properties.popup + "' ><img src='graphic/" + marker.toGeoJSON().properties.popup + "' alt='Image' ' style='width:150px;' ></a>" + "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>");

    });
 ///This is my attempt to replace the hard-code Lats and Long (below) from CSV file 
    this.eachLayer(function (marker) {
        const points = [L.latLng(marker.toGeoJSON().properties.Lats, marker.toGeoJSON().properties.Long)];
        console.log(points); //Shows up Null

        /*      
            //Replacing this with Data from CSV file
        const points = [
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693)
        ];

        */
        const oms = new OverlappingMarkerSpiderfier(map, {
            keepSpiderfied: true
        });

        points
            .map((p, i) => L.marker(p).bindPopup('<strong>' + marker.toGeoJSON().properties.cityName + '</strong>' + ', ' + '</br>' + marker.toGeoJSON().properties.discrip + "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='" + marker.toGeoJSON().properties.popup + "'   title='" + marker.toGeoJSON().properties.discrip + " '  href='graphic/" + marker.toGeoJSON().properties.popup + "' ><img src='graphic/" + marker.toGeoJSON().properties.popup + "' alt='Image' ' style='width:150px;' ></a>" + "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"))
            .forEach(marker => {
                map.addLayer(marker);
                oms.addMarker(marker);
            });

        oms.addListener('spiderfy', (markers) => {
            console.log('spiderfy');
            map.closePopup();

            markers.forEach(marker => marker.setIcon(createIcon()));
        });

        oms.addListener('unspiderfy', (markers) => {
            console.log('unspiderfy');
            // map.closePopup();

            markers.forEach(marker => marker.setIcon(createIcon()));
        });

        // lengthen the spider's leg by 4x
        oms.circleFootSeparation = 100;

        forceUnspiderfy();

        ////////////

        function createIcon(color = 'blue') {
            return new L.Icon({
                iconUrl: `graphic/gTank.png`,
                //iconUrl: `https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-${color}.png`,
                // shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                //shadowUrl: 'https://googlemaps.github.io/js-marker-clusterer/images/m5.png',
                //shadowUrl: 'https://image.ibb.co/nQrYGc/overlapping_markers.png',
                //shadowUrlRetina: 'https://image.ibb.co/h8jnbc/overlapping_markers_2x.png',
                //shadowAnchor: [20.5, 41],
                iconSize: [20, 25],
                popupAnchor: [1, -34]
            });
        }

        function forceUnspiderfy() {
            // workaround for https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet/issues/32
            oms.getMarkers().forEach(marker => oms.spiderListener(marker));

            oms.unspiderfy();
        }

    });
}).addTo(map);