Farbe (von Leaflet CircleMarker) dem Wertebereich zuweisen

Question

Ich habe eine Broschüre erstellt, die CircleMarkers mit Popups zeigt. Sie sind abhängig davon gefärbt, wann das Haus, für das sie stehen, gebaut wurde. (Es tut mir leid, mein Englisch ist schrecklich). Hier ist der Link zu meinem jsfiddle: https://jsfiddle.net/marielouisejournocode/p2pL3r49/2/ Wie Sie sehen können, habe ich die Farbe wie folgt

var colors = { 
     1966: 'green', 
     1960: 'yellow', 
     1952: 'orange', 
     1951: 'red' 
    }; 

So js ist nicht mein „native“ Programmiersprache. In R kann ich einer Reihe von Zahlen wie c(1950, 1960) eine Farbe zuweisen, die alle Zahlen von 1950 bis 1960 wären und die Zuordnung würde immer noch funktionieren. Ich weiß nicht, wie man diesen Bereich in js bekommt und ich weiß nicht, ob ich einer Reihe von Zahlen darin eine Farbe zuweisen kann. Ich möchte alle verfügbaren Baujahre visualisieren (ich denke, mit dem Ende des zweiten Weltkriegs, weil Dortmund ziemlich zerstört wurde) und es wäre toll, wenn ich nicht jedes Jahr eins nach dem anderen auf 6 oder so verschiedene Farben zuweisen müsste .

Answer 1

Wenn ich richtig verstehe, ist Ihr gewünschtes Ergebnis, eine bestimmte Farbe zu Ihrem Circle Marker je nach Jahr Eigenschaft Ihrer Funktionen (Häuser) zuzuweisen, aber eine Reihe von Jahren können die gleiche Farbe erhalten aus Gründen der Einfachheit (Sie brauchen also nur ein paar Farben statt einer pro Jahr).

In diesem Fall haben Sie viele Möglichkeiten, das Jahr zu überprüfen und die entsprechende Farbe zu bestimmen.

function getColor(d) { 
    return d >= 1966 ? 'green' : // Means: if (d >= 1966) return 'green' else… 
    d >= 1960 ? 'black' : // if (d >= 1960) return 'black' else etc… 
    d >= 1952 ? 'red' : 
    d >= 1940 ? 'orange' : // Note that numbers must be in descending order 
    'grey'; 
} 

// […] 

L.circleMarker([place.lon, place.lat], { 
    color: getColor(place.constructdate), // you can call the getColor function 
    fillColor: getColor(place.constructdate), 
    fillOpacity: 0.5 
}) 

Aktualisiert JSFiddle Ein Beispiel wäre in der Leaflet Chloropleth map tutorial ("Hinzufügen von etwas Farbe" Abschnitt) sein: https://jsfiddle.net/p2pL3r49/3/

Answer 2

können Sie eine Funktion schreiben, dies zu tun:

function getRange(start, end) { 
    var range = []; 

    for (var i = start; i < end; i++) { 
    range.push(i); 
    } 

    return range; 
} 

var years = getRange(1950, 1961); // [1950,..., 1960] 

Wenn Sie bereit sind, ein Dienstprogramm-Bibliothek wie lodash verwenden möchten, können Sie dies in einer Zeile tun:

var years = _.range(1950, 1961); // [1950,...,1960] 

Was Bei den Farben gibt es viele Möglichkeiten zu interpolieren. Es gibt eine gute Antwort here