将 setColor() 与 Mapbox's.addLayer() 一起使用

Question

您好，我正在处理一些公共的 Covid_19 数据集，我正在尝试创建世界各国及其各自确诊病例、死亡人数和恢复统计数据的可视化。 我正在使用 mapbox 生成 map 和 .addSource 以添加国家/地区的 geoJson 层。 现在该层都是一种颜色，因为在 .addLayer 部分内部它只接受一种颜色：

map.addLayer({
      'id': 'world_countries_fill',
      'type': 'fill',
      'source': 'world_countries',
      'paint': {
           'fill-color': '#f08', // <<<
           'fill-opacity': 0.4
      }

是否可以使用 function 根据 mapbox.addLayer() 中单个国家/地区的死亡人数返回颜色？

或者我应该使用 leaflet 和 turf.js featureCollection？

这是我的完整 js 文件：

function Country(name, death, recovered, confirmed) {
    this.name = name;
    this.death = death;
    this.recovered = recovered;
    this.confirmed = confirmed;
}

var countryArray = []; //array of country objects

function init() {
    get_data();

    console.log(countryArray);

    mapboxgl.accessToken = '***';
    var map = new mapboxgl.Map({
        container: 'map_area',
        style: 'mapbox://styles/mapbox/dark-v10',
        center: [4.899, 52.372],
        zoom: 2,
    });

    map.scrollZoom.disable();


    map.on('load', function() {
            map.addSource('world_countries', {
                type: 'geojson',
                data: 'world.geojson'
            });

            map.addLayer({
                'id': 'world_countries_fill',
                'type': 'fill',
                'source': 'world_countries',
                'paint': {
                    'fill-color': '#f08',
                    'fill-opacity': 0.4
                }
                //color function here
                /*
                'fill-color': function() {
                    let length = countryArray.length;

                    for(let i = 0; i < length; i++) {
                        let country = countryArray[i];
                        let color = getColorDeaths(country.deaths)
                    }
                    return color;
                },
                */
            });
    });


}

function getColorDeaths(d) {
    return d > 500000 ? '#800026' :
            d > 350000  ? '#BD0026' :
            d > 150000  ? '#E31A1C' :
            d > 85000  ? '#FC4E2A' :
            d > 25000   ? '#FD8D3C' :
            d > 8500   ? '#FEB24C' :
            d > 950   ? '#FED976' :
                        '#FFEDA0';
}

//fetchs data from the source and calls load_country_data on the json file
function get_data() {
    fetch("https://pomber.github.io/covid19/timeseries.json")
        .then(response => response.json())
        .then(data => {
            //console.log(data); //will print the json object
            load_country_data(data);
        })
        .catch(err => console.error(err));
}

//creates a Country object from each key in the json data fetched and appends the object to an array.
function load_country_data(data) {
    let json_Length = Object.keys(data).length; //amount of countrys
    let c_keys = Object.keys(data); //list of the keys
    //console.log(json_Length);

    for(let i = 0; i < json_Length; i++) {
        let tmp = new Country(); // create new Country object for each country
        let name = c_keys[i] //get the name of the country
        let length = data[name].length; //get the length from inside the country

        let tmp_deaths = 0;
        let tmp_recovered = 0;
        let tmp_confirmed = 0;

        //console.log(test[i]); // <this is how you would get the name of each country as a string
        //console.log(data['Angola']); // <this is how you get to each country

        //console.log(data[name][4]);
        //console.log(data[name][4].deaths);

        for(let i = 0; i < length; i++) {
            tmp_deaths += data[name][i].deaths;
            tmp_recovered += data[name][i].recovered;
            tmp_confirmed += data[name][i].confirmed;
        }

        //fill in the country object with the data!
        tmp.name = name;
        tmp.death = tmp_deaths;
        tmp.confirmed = tmp_confirmed;
        tmp.recovered = tmp_recovered;

        countryArray.push(tmp); //add the new object to an array to keep track
    }
}



window.onload = init;

Answer 1

您可以通过使用'fill-color'属性的表达式来实现此功能。 这是一个示例，演示如何使用数据驱动的属性设置圆形样式。 您的实现可以采用类似的方法，而不是使用interpolate或step表达式来指定不同的填充 colors，具体取决于案例的数量。 这个创建和样式集群示例展示了如何使用与您想要做的非常相似的step表达式，通过根据特定集群的计数落入哪个数字范围为圆圈着色。