因此，我正在尝试使用Leaflet制作一个氯叶绿图。我希望颜色根据该国的避风港排名而有所不同，深红色代表最高排名（＃1），浅黄色代表最低（＃64）。我已经下载了每个国家的shapefile，将它们转换为geojson，然后转换为Javascript，并在每个文件中添加了HavenRanking作为属性，例如。如下：
{
"type": "FeatureCollection",
"name": "TurksAndCaicos",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "ID_0": 237, "ISO": "TCA", "NAME_0": "Turks and Caicos Islands", "havenRanking": 32, "ID_1": 1, "NAME_1": "Grand Turk", "TYPE_1": "District", "ENGTYPE_1": "District", "NL_NAME_1": null, "VARNAME_1": null }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -71.132080078124943, 21.513471603393612 ],
（在上面的示例中，我已经切断了坐标，因为其中有很多）。现在这是我的代码：
/* This loads the geojson data for the Turks and Caicos Islands, by calling the variable in my external javascript which contains
the data layer, and then styling it. */
TurksAndCaicosLayer = L.geoJson(TurksAndCaicos, {
style: styleGenerator, //set the style using a function
}
)
/* This function styles the data (a single country) */
function styleGenerator(feature) {
//return a style
return {
weight: 0.5,
color: '#666',
fillOpacity: 1,
fillColor: getcolor(feature.properties.havenRanking)
};
}
/* Return a color based upon the Haven Ranking */
function getcolor(havenRanking) {
// create a variable to hold the color
let color;
//assign a color based upon the Haven Ranking
if (havenRanking = 1) {
color = '#bd0026';
} else if (havenRanking = 2) {
color = '#bf0626';
} else if (havenRanking = 3) {
color = '#c20d27';
} else if (havenRanking = 4) {
color = '#c41327';
} else if (havenRanking = 5) {
color = '#c71827';
} else if (havenRanking = 6) {
color = '#c91c28';
} else if (havenRanking = 7) {
color = '#cb2028';
} else if (havenRanking = 8) {
color = '#cd2429';
} else if (havenRanking = 9) {
color = '#cf2829';
} else if (havenRanking = 10) {
color = '#d12c2a';
} else if (havenRanking = 11) {
color = '#d4302a';
} else if (havenRanking = 12) {
color = '#d5332b';
} else if (havenRanking = 13) {
color = '#d7372c';
} else if (havenRanking = 14) {
color = '#d93a2c';
} else if (havenRanking = 15) {
color = '#db3e2d';
} else if (havenRanking = 16) {
color = '#dd412e';
} else if (havenRanking = 17) {
color = '#df442f';
} else if (havenRanking = 18) {
color = '#e0472f';
} else if (havenRanking = 19) {
color = '#e24b30';
} else if (havenRanking = 20) {
color = '#e44e31';
} else if (havenRanking = 21) {
color = '#e55132';
} else if (havenRanking = 22) {
color = '#e75433';
} else if (havenRanking = 23) {
color = '#e85834';
} else if (havenRanking = 24) {
color = '#e95b35';
} else if (havenRanking = 25) {
color = '#eb5e36';
} else if (havenRanking = 26) {
color = '#ec6137';
} else if (havenRanking = 27) {
color = '#ee6438';
} else if (havenRanking = 28) {
color = '#ef683a';
} else if (havenRanking = 29) {
color = '#f06b3b';
} else if (havenRanking = 30) {
color = '#f16e3c';
} else if (havenRanking = 31) {
color = '#f2713d';
} else if (havenRanking = 32) {
color = '#f3743f';
} else if (havenRanking = 33) {
color = '#f47740';
} else if (havenRanking = 34) {
color = '#f57b41';
} else if (havenRanking = 35) {
color = '#f67e43';
} else if (havenRanking = 36) {
color = '#f78144';
} else if (havenRanking = 37) {
color = '#f88445';
} else if (havenRanking = 38) {
color = '#f98747';
} else if (havenRanking = 39) {
color = '#fa8a48';
} else if (havenRanking = 40) {
color = '#fa8d4a';
} else if (havenRanking = 41) {
color = '#fb914c';
} else if (havenRanking = 42) {
color = '#fc944d';
} else if (havenRanking = 43) {
color = '#fc974f';
} else if (havenRanking = 44) {
color = '#fd9a50';
} else if (havenRanking = 45) {
color = '#fd9d52';
} else if (havenRanking = 46) {
color = '#fea054';
} else if (havenRanking = 47) {
color = '#fea355';
} else if (havenRanking = 48) {
color = '#ffa657';
} else if (havenRanking = 49) {
color = '#ffaa59';
} else if (havenRanking = 50) {
color = '#ffad5b';
} else if (havenRanking = 51) {
color = '#ffb05d';
} else if (havenRanking = 52) {
color = '#ffb35e';
} else if (havenRanking = 53) {
color = '#ffb760';
} else if (havenRanking = 54) {
color = '#ffba62';
} else if (havenRanking = 55) {
color = '#ffbd64';
} else if (havenRanking = 56) {
color = '#ffc066';
} else if (havenRanking = 57) {
color = '#ffc368';
} else if (havenRanking = 58) {
color = '#ffc66a';
} else if (havenRanking = 59) {
color = '#ffc96c';
} else if (havenRanking = 60) {
color = '#ffcd6e';
} else if (havenRanking = 61) {
color = '#ffd070';
} else if (havenRanking = 62) {
color = '#ffd372';
} else if (havenRanking = 63) {
color = '#fed674';
} else if (havenRanking = 64) {
color = '#fed976';
}
//return the resulting color
return color;
}
我意识到这是一门超长的缠卷，但是我想为每个不同的等级使用不同的颜色。
所以，我的问题是，所有国家/地区都以暗红色显示为第一色，即使他们的避风港排名很低。我不知道是什么原因造成的。我的geojson文件中的HavenRanking属性或代码是否有问题？
非常感谢
答案 0 :(得分：2)
@Falke Design的最佳实践是使用像===这样的严格相等运算符if (havenRanking === 1)。
除此之外，还可以查看switch语句，该语句使您可以简单地else if进行此冗余操作：
switch(havenRanking ) {
case 1:
color = '#bd0026';
break;
case 2:
color = '#bd0026';
break;
}
答案 1 :(得分：1)
您所有的“如果”都错了。
if (havenRanking = 1) {
应为：
if (havenRanking == 1) {