javascript - 多个 choropleth 图层应用不同的样式

Question

我尝试按照有关 leaflet 上的图层控件的教程进行操作，但无法使其按我想要的方式运行。我希望有 2 个不同的 choropleth 层可供用户在图层控件中选择，一次显示一个。但是，当我取消选中 herion 或 total layer 单选按钮时，样式似乎没有采用，它们相互重叠。是否可以更正此问题？

我的代码如下。

var total_layer =
    //ADDS GEOJSON DATA TO MAP
    L.geoJson(totalData) 

    //SETS CHOROPLETH COLORS TO MAP colorbrewer2.org
    function getColor(d) {
        return d > 489  ? '#084594' :
            d > 408  ? '#2171b5' :
            d > 326  ? '#4292c6' :
            d > 245  ? '#6baed6' :
            d > 163  ? '#9ecae1' :
            d > 82   ? '#c6dbef' :
                        '#eff3ff';
    }

    //APPLYS COLOR TO MAP BASED OFF SELECTED PROPERTY IN GEOSJON
    function style(feature) {
        return {
            fillColor: getColor(feature.properties.rate),
            weight: 1,
            opacity: 1,
            color: 'black',
            fillOpacity: 0.7
        };
    }
;

var herion_layer =
    //ADDS GEOJSON DATA TO MAP
    L.geoJson(herData) 

    //SETS CHOROPLETH COLORS TO MAP colorbrewer2.org
    function getColor(d) {
        return d > 472  ? '#99000d' :
            d > 394  ? '#cb181d' :
            d > 315  ? '#ef3b2c' :
            d > 236  ? '#fb6a4a' :
            d > 157  ? '#fc9272' :
            d > 79   ? '#fcbba1' :
                        '#fee5d9';
    }

    //APPLYS COLOR TO MAP BASED OFF SELECTED PROPERTY IN GEOSJON
    function style(feature) {
        return {
            fillColor: getColor(feature.properties.rate),
            weight: 1,
            opacity: 1,
            color: 'black',
            fillOpacity: 0.7
        };
    }
;

//SETS MAP STARTING LOCATION
var map = L.map('map',{
    center: [41.05, -77.5],
    zoom: 8,
    minZoom: 2,
    maxZoom: 18,
    layers: [total_layer, herion_layer]
});

//CREATES TILE LAYER
L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
    attribution: ""
}).addTo(map);

var overlayMaps = {
    "Total": total_layer,
    "Herion": herion_layer,
};

var controlLayers = L.control.layers(overlayMaps).addTo(map);
//************USER INTERACTION************

//APPLYS HIGHLIGHT FEATURE
function highlightFeature(e) {
    var layer = e.target;

    layer.setStyle({
        weight: 5,
        color: 'black',
        dashArray: '',
        fillOpacity: 0.7
    });

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

//RESETS STYLE WHEN MOUSE LEAVES TARGETED HIGHLIGHT
function resetHighlight(e) {
    geojson.resetStyle(e.target);
    info.update();
}

//APPLYS CLICK ZOOOM FEATURE WHEN TARGET IS CLICKED
function zoomToFeature(e) {
    map.fitBounds(e.target.getBounds());
}

//APPLYS FUNCTIONS ON EAACH FEATURE USING MOUSEOVER, MOUSEOUT, AND CLICK
function onEachFeature(feature, layer) {
    layer.on({
        mouseover: highlightFeature,
        mouseout: resetHighlight,
        click: zoomToFeature
    });
}

//STYLES DATA FROM GEOJSON AND APPLYS THE LAYER TO MAP
var geojson = L.geoJson(totalData, {
                    style: style,
                    onEachFeature: onEachFeature
                    }).addTo(map);
var geojson1 = L.geoJson(herData, {
                    style: style,
                    onEachFeature: onEachFeature
                    }).addTo(herion_layer);

Answer 1

您在同一范围内定义了两次 getColor 和 style 函数。在 JavaScript 中，缩进不会创建新范围。

因此每个只使用 1 个，你最终得到相同的样式。

您可以简单地为您的函数使用不同的名称。