如何为Leaflet的circleMarker创建样式组并统一应用？

我有100多个Leaflet circleMarker，部分标记使用样式{color: '#ffffff', weight:"4"}，另一部分使用{color: '#000000', weight:"4"}。为了后续能简单修改样式，我不想将样式内联写在标记本身中，希望创建两个样式组并分别定义样式，请问这是否可行？

当前代码 #

var markers = [];
var marker1 = L.circleMarker([00.000,00.000],{color: '#ffffff', weight:"4"}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker1);
var marker2 = L.circleMarker([00.000,00.000],{color: '#000000', weight:"3"}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker2);
var marker3 = L.circleMarker([00.000,00.000],{color: '#ffffff', weight:"4"}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker3);
var marker4 = L.circleMarker([00.000,00.000],{color: '#000000', weight:"3"}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker4);

期望写法 #

var markers = [];
var marker1 = L.circleMarker([00.000,00.000],{Group1}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker1);
var marker2 = L.circleMarker([00.000,00.000],{Group2}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker2);
var marker3 = L.circleMarker([00.000,00.000],{Group1}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker3);
var marker4 = L.circleMarker([00.000,00.000],{Group2}).addTo(map).on("click", circleClick).bindPopup
    ('<div>City Name</div>').bindTooltip("Say hello");
    markers.push(marker4);

var Group1 = /* some style definition */
var Group2 = /* some other style definition */

当然可以实现，Leaflet完全支持通过定义可复用的样式对象或样式函数来避免重复内联样式，后续修改样式时只需更新对应定义即可。

实现方式1：定义样式对象（适合固定样式） #

直接把样式定义成独立的对象，创建标记时直接传入该对象即可：

// 定义两个样式组
const group1Style = {
    color: '#ffffff',
    weight: "4"
};

const group2Style = {
    color: '#000000',
    weight: "3"
};

// 创建标记时引用样式对象
var markers = [];
var marker1 = L.circleMarker([00.000,00.000], group1Style)
    .addTo(map)
    .on("click", circleClick)
    .bindPopup('<div>City Name</div>')
    .bindTooltip("Say hello");
markers.push(marker1);

var marker2 = L.circleMarker([00.000,00.000], group2Style)
    .addTo(map)
    .on("click", circleClick)
    .bindPopup('<div>City Name</div>')
    .bindTooltip("Say hello");
markers.push(marker2);

// 其余标记同理...

实现方式2：定义样式函数（适合动态样式） #

如果需要根据标记属性或其他条件动态生成样式，可以用样式函数，调用函数即可获取样式对象：

// 定义样式函数
function group1Style() {
    return {
        color: '#ffffff',
        weight: "4"
    };
}

function group2Style() {
    return {
        color: '#000000',
        weight: "3"
    };
}

// 创建标记时调用函数获取样式
var marker1 = L.circleMarker([00.000,00.000], group1Style())
    .addTo(map)
    .on("click", circleClick)
    .bindPopup('<div>City Name</div>')
    .bindTooltip("Say hello");
markers.push(marker1);

// 其余标记同理...

更新：补充验证后的可行写法 #

基于社区提供的思路，验证后的正确写法如下（样式函数方式）：

function group1Style() {
    return {
        color: '#ffffff',
        weight:"4"
    };
}

var marker1 = L.circleMarker([00.000,00.000],group1Style()).addTo(map).on("click", circleClick).bindPopup ('<div>City Name</div>').bindTooltip("Say hello");markers.push(marker1);

只需将样式函数直接放在经纬度参数之后，不需要使用{style: ....}这种格式。

内容的提问来源于stack exchange，提问作者Pepe