Generieren Variable Leaflet Marker Farben Basen auf Arrays

Question

Ich versuche, die Punkte auf meiner Karte eine dynamische Farbe, basierend auf einem Array mit Farben gefüllt geben.

Derzeit sind die Farben in meinem Code in einer Funktion definiert:

function getColor(keten) { 
    return keten == "MacDonalds" ? '#800888' : 
      keten == "Subway"  ? '#969696' : 
      keten == "KFC"   ? '#081d58' : 
             '#252525' ; 
    } 

die im Prospekt genannt wird:

window["mapDataLayer"] = L.geoJson(geojson, { 
     pointToLayer: function (feature, latlng) { 
      var markerStyle = { 
       fillColor: getColor(feature.properties.Fastfoodketen), 
........ 

Aufgrund der Gründe, ich habe jetzt dynamische Daten und müssen Ändere meinen Code etwas.

Ich habe zwei Arrays erstellt, eines gefüllt mit Farben und eines (dynamisch) gefüllt mit Restaurantkettennamen. Dann durchlaufe ich beide Arrays und versuche eine Variable zu erzeugen, die wie die Daten in meiner getColor() Funktion aussieht. Diese Variable könnte dann auf die gleiche Weise zurückgegeben werden.

arrayKleur = ["#a6cee3", "#1f78b4", "#b2df8a", "#33a02c", "#fb9a99", "#e31a1c", "#fdbf6f", "#ff7f00", "#6a3d9a", "#b15928"]; 
// filled for testing purposes, normally it's filled somewhere else 
arrayKeten = ["Kwalitaria", "NYPizza", "Dominos", "BurgerKing", "KFC", "Subway", "MacDonalds"]; 

var leafletData = []; 

for (i= 0; i < arrayKeten.length; i++){ 
    leafletData += 'keten == '+arrayKeten[i]+' ? '+arrayKleur[i]+' :</br>'; 
    } 
leafletData += 'red;' ; 

function getColor(keten) { 
    return leafletData; 
    } 

Mit diesem neuen Code bekomme ich ein string, der wie der Inhalt von getColor() nur schauen, aber ich denke, Leaflet nicht mit einem string, weil alle Markierungen auf meiner Karte jetzt schwarz arbeiten können.

Ich habe versucht, meine ursprüngliche getColor() Funktion zu ändern, um meine Arrays zu integrieren, nur um zu sehen, ob es funktioniert.

function getColor(keten) { 
    return keten == arrayKeten[0] ? arrayKleur[0]: 
      keten == arrayKeten[1] ? arrayKleur[1]: 
      keten == arrayKeten[2] ? arrayKleur[2]: 
             '#999999' ; 
    } 

Dies funktioniert einwandfrei, so dass ich glaube, ich bin ziemlich nah an der Lösung mit meinem string.

Was muss ich ändern, damit mein Code ordnungsgemäß funktioniert? Oder übertreibe ich vielleicht Dinge?

Answer 1

Sie verkomplizieren Dinge. Ihre Zeichenfolge ist keine Farbe, sondern eine Zeichenfolge, die wie JavaScript aussieht, aber nicht ausgewertet wird. Und mit eval() ist 99,9999% der Zeit falsch.

Verwenden Sie stattdessen good ol‘indexOf:

function getColor(keten) { 
    var i = arrayKeten.indexOf(keten); 
    if (i !== -1) { 
     return arrayKleur[ i ]; 
    } else { 
     return '#999999'; 
    } 
} 

Answer 2

Warum nicht ein Objekt für die Farben mit einem Standardwert verwenden?

function getColor(keten) { 
    var colors = { Kwalitaria: "#a6cee3", NYPizza: "#1f78b4", Dominos: "#b2df8a", BurgerKing: "#33a02c", KFC: "#fb9a99", Subway: "#e31a1c", MacDonalds: "#fdbf6f" }; 
    return colors[keten] || '#999999'; 
}