如何更改变量中的一项设置

Question

我在地图上有圆形标记，它使用 fillColors（总共 8 种颜色），具体取决于哪个值 (Ankomsttid) 必须显示从两个起点开始的距离如何增加，离起点越远，标记越红是。

我的问题是我还想使用属性颜色更改圆圈“外部颜色环”或边框：（不是填充颜色）取决于列值“Plats”以区分并显示标记所属的起点（Plats）到。所有标记始终使用 8 个“光谱填充颜色”，但需要根据此示例中的（Plats）值“S”或“H”更改边框。

我是否需要编写一组新代码，或者我可以只更改变量中已经存在的“颜色：”部分吗？我需要的是根据“Plats”的属性值更改“颜色：”部分。例如，如果“Plats”的值为“S”，则更改为“color: 'blue'”（而不是黑色），或者如果“Plats”的值为“H”，则更改为“color:'red'（而不是黑色）。这是代码，谢谢...

 pointToLayer: function(feature, latlng) {
    var tid = feature.properties.Ankomsttid;
    var pla = feature.properties.Plats;

    var avst;


// base Circkel object
// Since fillColor is the only different value
// predefine all the others
function avstCirkel(fillColor){
    this.fillColor = fillColor
    this.radius = 5
    this.fill = true
    this.color = "#000000"
    this.weight = 1
    this.opacity = 1
    this.fillOpacity = 1
}


// Now you can make all your cirkels easily
// and they can be referenced with avstCirkels[0],
// avstCirkels[1], etc...
let avstCirkels = [
  new avstCirkel('#3288bd'),
  new avstCirkel('#66c2a5'),
  new avstCirkel('#abdda4'),
  new avstCirkel('#e6f598'),
  new avstCirkel('#fee08b'),
  new avstCirkel('#fdae61'),
  new avstCirkel('#f46d43'),
  new avstCirkel('#d53e4f')
]


const colors = {
  S: "blue",
  H: "red"
}
// forEach will loop through all the cirkels and perform a function
avstCirkels.forEach(cirk => cirk.color = colors[pla] || "black")
//console.log("colors: ", avstCirkels[1].color, avstCirkels[2].color)


       // Filter to change the fillColor on circleMarkers
    if (tid > 0 && tid < 201){
        avst = new L.circleMarker(latlng, avstCirkel[0]);
      } 
    else if (tid > 200 && tid < 401){
        avst = new L.circleMarker(latlng, avstCirkel[1]);
      } 
    else if (tid > 400 && tid < 601){
        avst = new L.circleMarker(latlng, avstCirkel[2]);
      }
    else if (tid > 600 && tid < 801){
        avst = new L.circleMarker(latlng, avstCirkel[3]);
      }
    else if (tid > 800 && tid < 1001){
        avst = new L.circleMarker(latlng, avstCirkel[4]);
      }
    else if (tid > 1000 && tid < 1201){
        avst = new L.circleMarker(latlng, avstCirkel[5]);
      }
    else if (tid > 1200 && tid < 1401){
        avst = new L.circleMarker(latlng, avstCirkel[6]);
      }
    else if (tid > 1400){
        avst = new L.circleMarker(latlng, avstCirkel[7]);
      }
        else {
        avst =  null
      }
      return avst;
      }

编辑我实际上发现了我的错误，在引用 avstCirkel 时我忘记了“s”应该读为“avstCirkels[0]”而不是“avstCirkel[0]”，现在情况变得更好了 :)

Answer 1

有很多方法可以做到这一点，具体取决于您何时需要设置颜色。如果您在定义圆圈时知道Plats 的值，则可以在定义中使用它：

// Map Plat value to colors:
let pla = 'S'
const colors = {
  S: "blue",
  H: "red"
}

var avstCirkel_1 = {
 radius: 5,
 fill: true,
 fillColor: '#3288bd',
 color: colors[pla] || '#000000', // will use pla if there is a color mapping otherwise black
 weight: 1,
 opacity: 1,
 fillOpacity: 1
};

console.log("circle color: ", avstCirkel_1.color)

如果您需要先定义它们，然后在将来的某个时候根据某些条件将它们全部更改，我建议您更改代码的结构。一般来说，如果您要创建一个名称为var_1、var_2、var_3 的变量，这很好地表明您应该使用数组。特别是如果您想对它们作为一个组执行操作。

如果您创建一个基础Cirkle 对象，您可以定义默认值，并以此为基础创建您的对象。然后将它们存储在数组而不是单个变量中。这将大大简化您的代码：

// base Circkel object
// Since fillColor is the only different value
// predefine all the others
function avstCirkel(fillColor){
    this.fillColor = fillColor
    this.radius = 5
    this.fill = true
    this.color = "#000000"
    this.weight = 1
    this.opacity = 1
    this.fillOpacity = 1
}


// Now you can make all your cirkels easily
// and they can be referenced with avstCirkels[0],
// avstCirkels[1], etc...
let avstCirkels = [
  new avstCirkel('#3288bd'),
  new avstCirkel('#66c2a5'),
  new avstCirkel('#abdda4'),
  new avstCirkel('#e6f598'),
  new avstCirkel('#fee08b'),
  new avstCirkel('#fdae61'),
  new avstCirkel('#f46d43'),
  new avstCirkel('#d53e4f')
]

// now its easy to perform operations on them as a group
// for example, change all colors based on pla:
var pla = 'H'

const colors = {
  S: "blue",
  H: "red"
}
// forEach will loop through all the cirkels and perform a function
avstCirkels.forEach(cirk => cirk.color = colors[pla] || "black")
console.log("colors: ", avstCirkels[1].color, avstCirkels[2].color)

当然，您可以混合使用这些方法并更改哪些属性定义为默认值，哪些属性作为参数传递。