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

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], {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'unselected',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; radius: 20,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; first_market: loop_index == 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; last_market: loop_index == points.length-1,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; point_id: point.id,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; prior_point_id: priorPoint ? priorPoint.id : null,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });polylinePoints[polylinePoints.length]=如果没有必要也不要使用。采用polylinePoints.push(你想用折线上的数据做什么？为什么不将整个点数组添加到折线？var polyline = new L.Polyline(polylinePoints, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; customData:{&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; points: points&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });否则，您可以创建一个点 id 数组：let polylinePoints= []&nbsp; // I get all info about all Polylineslet loop_index =&nbsp; 0;let pointIds = [];points.forEach(point => {&nbsp; &nbsp;pointIds.push(point.id);&nbsp;//...var polyline = new L.Polyline(polylinePoints, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; customData:{&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; points: pointIds&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });或者（我建议）将标记添加到折线：let markersForPoly = [];points.forEach(point => {&nbsp;//... Loop ...&nbsp;myMarker.addTo(mymap);&nbsp;markersForPoly .push(myMarker);});//.. Codevar polyline = new L.Polyline(polylinePoints, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; customData:{&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; points: markersForPoly&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });您可以在点击侦听器中获得积分：polyline.on('click', function (event) {&nbsp; &nbsp; &nbsp;var layer = event.target;&nbsp; &nbsp; &nbsp;var points = layer.options.customData.points;&nbsp; &nbsp; &nbsp;console.log(points);});示例 https://jsfiddle.net/falkedesign/61sjx3bv/