Javascript：制作可编辑自定义属性的正确语法（单击时，切换 Leaflet GeoJSON 对象的颜色）

Question

我已经使用 leaflet 编写了以下 javascript 代码来制作多条红色多段线，每条多段线都有属性称为“active”，开始时为 true。

    for (let i = 0; i < railLinks.length; i++) {
        var polyline = new L.geoJSON(railLinks[i].polyline, {
          linkNumber: railLinks[i].linkNumber,
          active: true, //THIS LINE DOESNT DO WHAT I THOUGHT IT WOULD
          style: function(active) {
            return {
              weight: 2,
              color: 'red'
            };
          }
        }).addTo(map);
        
        polyline.on('click', function() {
          set = !this.active
          this.active = set;
          this.setStyle({
            color: getColor(set)
          });
          
        });
    }
    
    function getColor(x) {
      return x  ?   'black':
                    '#888888';
    };

我正在尝试实现一个切换，这样当您单击一条真多段线时，它会变为假，反之亦然。

有了这个我希望第一次点击变成灰色（“假”），然后是黑色，然后是灰色等等。相反，第一次点击变成黑色（代表真），表明初始状态不是真的。

我认为问题出在我的语法上

active: true

不一样属性被改成后面的

this.active

因为我可以将第一个活动设置为任何值而不影响点击行为。知道这应该是什么吗？

Answer 1

对于遇到类似问题的任何人的信息，我现在已经用下面的代码解决了我的问题：

    for (let i = 0; i < railLinks.length; i++) {
        var polyline = new L.geoJSON(railLinks[i].polyline, {
          linkNumber: railLinks[i].linkNumber,
        }).addTo(map);
        polyline.active = true;
        polyline.setStyle({
            weight: 2,
            color: 'red'
        });
        polyline.on('contextmenu', function() {
          set = !this.active
          this.active = set;
          this.setStyle({
            color: getColor(set)
          });
        });
    }
    
    function getColor(x) {
      return x ? 'black':'#888888';
    };

Javascript：制作可编辑自定义属性的正确语法（单击时，切换 Leaflet GeoJSON 对象的颜色）

Javascript: Correct syntax for making editable custom properties (on click, toggle colour of Leaflet GeoJSON object)

javascript

properties

geojson

polyline

leaflet