Question

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

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

我需要编写一组新代码还是可以仅更改变量中已经存在的“ color：”部分？我需要更改“ color：”部分，具体取决于“ 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)

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

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

1 个答案: