使用 Leaflet 更新 geojson 形状的颜色

Question

学习本教程：

http://leafletjs.com/examples/choropleth.html

我使用这段代码创建了一个地图：

function loadNeighborhoods()
{
    $.ajax({async: false, dataType: "json", url: "https://nycdatastables.s3.amazonaws.com/2013-08-19T18:22:23.125Z/community-districts-polygon.geojson", success: function(data)
    {
        // Add GeoJSON layer to the map once the file is loaded
        geojson = L.geoJson(data,  
        {
            style: style,
            onEachFeature: onEachFeature
        }).addTo(map);
    }});

    // Control that shows state info on hover
    info = L.control();

    info.onAdd = function (map) {
        this._div = L.DomUtil.create('div', 'info');
        this.update();
        return this._div;
    };

    info.update = function (props) {
        this._div.innerHTML = (props ? '<b> Region ID:'+ props.id +' </b><br />' : 'Hover over a state');
        if (props && !_.isEmpty(noiseMapMatrix))
            pieChart(noiseMapMatrix, props.id);
    };

    info.addTo(map);
}

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

// Defines the style of the neighborhoods' polygons
function style(feature) 
{
    return {
        fillColor: '#FFEDA0',
        weight: 1,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

function getColor(regionId) 
{
    var count = 0;
    for (j = 0; j < complaints_type; j++)
    {   
        for (k = 0; k < time_slots; k++)
        {
            count += noiseMatrix[regionId][j][k];
        }
    }
    return count > 1000 ? '#800026' :
           count > 500  ? '#BD0026' :
           count > 200  ? '#E31A1C' :
           count > 100  ? '#FC4E2A' :
           count > 50   ? '#FD8D3C' :
           count > 20   ? '#FEB24C' :
           count > 10   ? '#FED976' :
                          '#FFEDA0';
}

但是，当用户在浏览器中打开文件时，用于定义每个社区区域（geojson 多边形）颜色的矩阵 noiseMatrix 就会被填充。因此，一开始，多边形具有相同的颜色。我想知道当用户选择正确的文件时如何更新这些颜色，即如何以及在何处再次调用函数 style (?)。

我正在尝试这样的事情：

function fillStyle()
{
    geojson.eachLayer(function (layer) {    
        layer.setStyle({fillColor : getComplaintsCountColor(layer.feature.id, true)}) 
    });
    // Legend of the states' color
    var legend = L.control({position: 'bottomleft'});

    legend.onAdd = function (map) 
    {
        var div = L.DomUtil.create('div', 'info legend'),
            grades = [0, 10, 20, 50, 100, 200],
            labels = [];

        for (var i = 0; i < grades.length; i++) {
            div.innerHTML +=
                '<div style="background:' + getComplaintsCountColor(grades[i] + 1, false) + '; border-radius: 50%; width: 10px; height: 10px; display:inline-block;"></div> ' +
                grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
        }

    return div;
};
legend.addTo(map);

}

但以下函数正在将样式重置为初始样式：

function resetHighlight(e) 
{
    var layer = e.target;

    geojson.resetStyle(layer);
    if (!L.Browser.ie && !L.Browser.opera) 
    {
        layer.bringToBack();
    }
//  d3.selectAll(".piechart").style("opacity", 0);
    info.update();
}

function highlightFeature(e) 
{
    var layer = e.target;

    layer.setStyle({
        weight: 3,
        color: '#666',
        dashArray: '',
        fillOpacity: 0.7
    });

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

Answer 1

我会用

geojson.setStyle(function(feature) {
    return {
        fillColor: getColor(feature.attributes.id),
        color: 'white'
    }
})

noiseMatrix初始化后调用

否则，您可以删除图层并使用新样式重新创建它。

map.removeLayer(geojson);

这样您就可以避免改变 resetHighlight 的工作方式。

使用 Leaflet 更新 geojson 形状的颜色

Update geojson shapes' colors with Leaflet

javascript

css

leaflet