0

您好，基于此传单教程http://leafletjs.com/examples/choropleth.html我正在尝试创建 20 个按钮，以便我可以将行：fillColor:getColor(feature.properties.density) 更改为不同的（例如通过按 btn #1 fillColor:getColor(feature.properties.btn1), btn #2 fillColor:getColor(feature.properties.btn1) 等

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

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

我只想在按下按钮时显示不同的 geojson 属性。

4

1 回答 1

6

沿着这些思路

首先，把你的图层变成一个变量

var mylayer = L.geoJson(statesData, {style: style});
map.addLayer(mylayer);

创建一个新函数以根据您的按钮 ID 获取新样式

function newStyle(id) {
    return {
        fillColor: getColor(id),
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

然后监听点击并获取btn id并设置新样式

$('body').on('click', 'btn', function (btn) {
    var id = $(btn).attr('id');
    var new_style = newStyle(id);
    mylayer.setStyle(new_style);
});

更新：

将 getcolor 更新为仅 getColor(id)。您应该使您的按钮与示例中 getColor 函数中的颜色相对应。因此 id="11" 将返回示例中的 #FED976，id="21" 将返回 #FEB24C 等等。

或者，您可以将按钮 ID 设置为颜色 (id="#FED976")，然后将 fillColor: getColor(id) 更改为 fillColor: id

更新2：

function style1(feature) {
    return {
        fillColor: getColor(feature.properties.btn1)
    };
}

function style2(feature) {
    return {
        fillColor: getColor(feature.properties.btn2)
    };
}

var mylayer = L.geoJson(statesData, {style: style});
map.addLayer(mylayer);

$('body').on('click', 'btn', function (btn) {
    var id = $(btn).attr('id');
    switch (id) {
        case "btn1":
            map.removeLayer(mylayer);
            mylayer = L.geoJson(statesData, {style: style1});
            map.addLayer(mylayer);
            break;
        case "btn2":
            map.removeLayer(mylayer);
            mylayer = L.geoJson(statesData, {style: style2});
            map.addLayer(mylayer);
            break;
    }
});
于 2013-11-11T02:08:23.897 回答