Leaflet choropleth 地图颜色未更新

Question

所以我正在尝试使用 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 属性问题还是我的代码问题？

非常感谢

Answer 1

你所有的"if"都错了。 if (havenRanking = 1) {

应该是： if (havenRanking == 1) {

Answer 2

作为@Falke Design 的回应，最佳做法是使用严格相等运算符===，例如if (havenRanking === 1)。

除此之外，请查看 switch 语句，它可以避免 else if:

的这种冗余

switch(havenRanking ) {
  case 1:
    color = '#bd0026'; 
    break;
  case 2:
    color = '#bd0026'; 
    break;
}

Leaflet choropleth 地图颜色未更新

Leaflet chloropleth map colours are not updating

javascript

geojson

leaflet