javascript - 动态小叶图层类

这是我的情况：我有一个带有点要素的geojson，其中一些具有属性“ ambulance”，其他具有“ intervention”。我将使用pointToLayer将它们添加到地图上

var geojsonLayer = L.geoJson(cars, {
pointToLayer: function(feature, latlng) {
    return new L.Marker(latlng, {icon: cssIcon});
    }, onEachFeature: onEachFeature });

cssIcon变量使我可以将SVG用于我的观点。

var cssIcon = L.divIcon({
      className: "css-icon",
      html: "<svg> my svg code here </svg>"
      ,iconSize: [20,20]
      ,iconAnchor: [20,20]});

现在的问题。我需要向此Svgs添加特定的类（基于features属性），以便可以使用新的Web Animation Api对它们进行动画处理。我尝试了以下方法：

function onEachFeature(feature, layer) {
layer.on({
    add: addClass,
})};

...在addClass函数应查询功能的地方，检查功能的属性是“救护车”还是“干预”，并相应地添加一个类：

function addClass(e){
    var layer = e.target;
    if(layer.feature.properties.car_type === "ambulance"){
    L.DomUtil.addClass(layer.defaultOptions.icon.options, "ambulance-class");

}else(layer.feature.properties.car_type === "intervention") {
    L.DomUtil.addClass(layer.defaultOptions.icon.options, "intervention-class");
}};

我得到的是：


具有“ ambulance”属性的图层将获得“ ambulance-class”类，但是...
具有“干预”属性的图层将获得“干预类别”，还将获得“救护车类别”类别。


我也尝试过：

 geojson_layer.eachLayer(function (layer) {
  if(layer.feature.properties.car_type === "ambulance") {
    L.DomUtil.addClass(layer.defaultOptions.icon.options, "ambulance-class");
  }});

..但是这根本不会添加类。在使用layer.defaultOptions.icon.options添加类时，我可能是错误的，但是使用此方法，我可以使用document.getElementsByClassName("ambulance-class")获取对象。
有任何想法吗？

最佳答案

如果调用单独的函数在pointToLayer中创建图标，则可以检查要素属性并将适当的类附加到className那里：

function getCssIcon(feature) {
  if (feature.properties.car_type === "ambulance") {
    classTxt = " ambulance-class";
  } else if (feature.properties.car_type === "intervention") {
    classTxt = " intervention-class";
  }
  return L.divIcon({
    className: "css-icon" + classTxt,
    html: "<svg> my svg code here </svg>",
    iconSize: [20, 20],
    iconAnchor: [20, 20]
  });
}

var geojsonLayer = L.geoJson(cars, {
  pointToLayer: function(feature, latlng) {
    return new L.Marker(latlng, {
      icon: getCssIcon(feature)
    });
  },
  onEachFeature: onEachFeature
}).addTo(map);