在传单中动态创建图层

Question

下面是我的传单小节的代码，目前有三层。该代码只是为每个图层重复一次，将功能重命名为style，style2，style3等。但是，图层的数量及其名称会发生​​变化，因此我需要动态创建图层。如何更新下面的代码，以便可以简单地遍历layer_names数组，并避免重复使用函数样式，highlightFeature，resetHighlight，onEachFeature？

我需要使用ES2015或更早版本。

// initialise map
var map = L.map('map').setView([54.8, -3], 6);

var color_bins = {
    'GVA': [0, 5, 10, 15, 20, 30, 50, 70],
    'Employment': [0, 50, 100, 150, 200, 250, 300, 500],
    'Business sites': [0, 10, 20, 40, 60, 80, 100, 150]
}

function getColor(d, vals) {
    var grad_cols = ['#FFEDA0', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C', '#BD0026', '#800026'];
    if (d >= vals[vals.length-1]) {
        return grad_cols[vals.length-1];
    }
    for (var i=0; i < (vals.length -1); i++) {
        // console.log(vals[i]);
        if (d >= vals[i] && d < vals[i+1]) {
            return grad_cols[i];
        }    
    }    
}        

var layer_names = ['GVA', 'Employment', 'Business sites'];

// GVA layer
var geojson;

function style(feature) {
    return {
        fillColor: getColor(feature.properties['GVA'], color_bins['GVA']),
        weight: 2,
    };
}

// specify hover effects
function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 3,
    });    

    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }    
    info.update(layer.feature.properties);
}    

function resetHighlight(e) {
    geojson.resetStyle(e.target);
    info.update();
}    

function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
    });    
}    

// add the choropleth layer
geojson = L.geoJson(statesData, {
    style: style,
    onEachFeature: onEachFeature
}).addTo(map);


// employment layer
var geojson2;

function style2(feature) {
    return {
        fillColor: getColor(feature.properties['Employment'], color_bins['Employment']),
        weight: 2,
    };
}

// specify hover effects
function highlightFeature2(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 3,
    });

    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }
    info.update(layer.feature.properties);
}

function resetHighlight2(e) {
    geojson2.resetStyle(e.target);
    info.update();
}

function onEachFeature2(feature, layer) {
    layer.on({
        mouseover: highlightFeature2,
        mouseout: resetHighlight2,
    });
}

// add the choropleth layer
geojson2 = L.geoJson(statesData, {
    style: style2,
    onEachFeature: onEachFeature2
});

// business sites layer
var geojson3;

function style3(feature) {
    return {
        fillColor: getColor(feature.properties['Business sites'], color_bins['Business sites']),
        weight: 2,
    };
}

// specify hover effects
function highlightFeature3(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 3,
    });

    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
        layer.bringToFront();
    }
    info.update(layer.feature.properties);
}

function resetHighlight3(e) {
    geojson3.resetStyle(e.target);
    info.update();
}

function onEachFeature3(feature, layer) {
    layer.on({
        mouseover: highlightFeature3,
        mouseout: resetHighlight3,
    });
}

// add the choropleth layer
geojson3 = L.geoJson(statesData, {
    style: style3,
    onEachFeature: onEachFeature3
});

// add layers control
var overlays = {
    "GVA": geojson,
    "Employment": geojson2,
    "Business sites": geojson3
};
L.control.layers(overlays, null, { collapsed: false }).addTo(map);