javascript - 如何在传单中将自定义数据添加到折线？

Question

在 jquery 3/leaflet/turf 应用程序中我使用从 CircleMarker 扩展的自定义类因为我需要在任何标记中保留有关任何点的信息和附近点的信息。标记与折线连接，我想保留相似的信息折线单击它即可获取此信息。我没能成功。我愿意

    customCircleMarker = L.CircleMarker.extend({
        options: {
            first_market: false,
            last_market: false,
            point_id: null,
            prior_point_id: null,
        }
    });
    var selectedPoint= {}
    var points = [
        {id: 1, title:'title #1 ', lat:52.509, lng:-3.08},
        {id: 2, title:'title #2 ', lat:51.503, lng:-1.06},
        {id: 3, title:'title #3 ', lat:49.51, lng:-2.47}
    ];

    var mymap = L.map('mapid').setView([51.505, -0.09], 7);


    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox/streets-v11',
        tileSize: 512,
        zoomOffset: -1
    }).addTo(mymap);

    drawPoints()
    function drawPoints() {
        let polylinePoints= []  // I get all info about all Polylines
        let loop_index =  0
        points.forEach(point => {
            let priorPoint= null
            if(loop_index > 0) {
                priorPoint= points[loop_index - 1]
            }

            var myMarker = new customCircleMarker([point.lat, point.lng], {
                title: 'unselected',
                radius: 20,
                first_market: loop_index == 0,
                last_market: loop_index == points.length-1,
                point_id: point.id,
                prior_point_id: priorPoint ? priorPoint.id : null,
            });
            myMarker.on('click', function (event) { // THAT WORKS OK
                console.log('myMarker.event.target.options.point_id::')
                console.log(event.target.options.point_id)
            });
            myMarker.addTo(mymap);

            polylinePoints[polylinePoints.length]=[point.lat, point.lng]
            loop_index++
        })


        var radius = 10;
        var polyline = new L.Polyline(polylinePoints, {
            color: 'green',
            opacity: 1,
            weight: 2,
            customData:{  // BUT TAT DOES NOT WORK AS POINT IS OUT OF LOOP
                point_id: point.id,
                prior_point_id: priorPoint ? priorPoint.id : null,
            }
            // offset: radius
        });
        // Add click listener
        polyline.on('click', function (event) {
            event.originalEvent.stopPropagation();
            window.event.cancelBubble = true;  // CAN NOT STOP Propagation
            showModal(event)
            // alert('Polyline clicked!');
        });
        // Add polyline to featuregroup
        polyline.addTo(mymap);

        // zoom the map to the polyline
        mymap.fitBounds(polyline.getBounds());

    } // function drawPoints () {

如何将自定义数据添加到折线？

谢谢!

Answer 1

您不必扩展 CircleMarker 类来添加更多选项。您可以通过默认方式执行此操作:

var myMarker = L.circleMarker([point.lat, point.lng], {
                title: 'unselected',
                radius: 20,
                first_market: loop_index == 0,
                last_market: loop_index == points.length-1,
                point_id: point.id,
                prior_point_id: priorPoint ? priorPoint.id : null,
            });

也不要使用polylinePoints[polylinePoints.length]=如果没有必要的话。使用polylinePoints.push(

<小时/>

您想要折线上的数据做什么？为什么不将整个点数组添加到折线中？

var polyline = new L.Polyline(polylinePoints, {
            customData:{  
                points: points
            }
        });

否则您可以创建一个点 id 数组:

let polylinePoints= []  // I get all info about all Polylines
let loop_index =  0;
let pointIds = [];
points.forEach(point => {
   pointIds.push(point.id);
 //...

var polyline = new L.Polyline(polylinePoints, {
            customData:{  
                points: pointIds
            }
        });

或者(我建议)将标记添加到折线:

let markersForPoly = [];
points.forEach(point => {
 //... Loop ...
 myMarker.addTo(mymap);
 markersForPoly .push(myMarker);
});

//.. Code

var polyline = new L.Polyline(polylinePoints, {
            customData:{  
                points: markersForPoly 
            }
        });

<小时/>

您可以在点击监听器中获取积分:

polyline.on('click', function (event) {
     var layer = event.target;
     var points = layer.options.customData.points;
     console.log(points);
});

示例 https://jsfiddle.net/falkedesign/61sjx3bv/