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

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]            }如何将自定义数据添加到折线？

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/