如何将chroma.js与单张一起使用？

Question

我使用leaflet生成多边形，然后像这样使用chroma.js：

function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7,
        fillColor: chroma.scale(['#fafa6e','#2A4858']).mode('lch').colors(6)
    };
}

var geojson = L.geoJson(statesData, {
    style: style,
}).addTo(map);

为什么所有多边形只有一种填充颜色，黑色，而不是一系列颜色？

Answer 1

您正在将fillColor设置为颜色列表。您需要根据feature的属性选择特定的颜色。

这是可行的(基于其中一个official Leaflet demos)。

var states = [{
    "type": "Feature",
    "properties": {"color_id": 1},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-104.05, 48.99],
            [-97.22,  48.98],
            [-96.58,  45.94],
            [-104.03, 45.94],
            [-104.05, 48.99]
        ]]
    }
}, {
    "type": "Feature",
    "properties": {"color_id": 2},
    "geometry": {
        "type": "Polygon",
        "coordinates": [[
            [-109.05, 41.00],
            [-102.06, 40.99],
            [-102.03, 36.99],
            [-109.04, 36.99],
            [-109.05, 41.00]
        ]]
    }
}];

colors = chroma.scale(['#fafa6e','#2A4858']).mode('lch').colors(6)

function style(feature) {
    return {
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7,
        fillColor: colors[feature.properties.color_id]
    };
}

layer = L.geoJSON(states, {style: style}).addTo(map);