Класс слоя динамического листового слоя

Question

Это мой сценарий: у меня есть геойсон с точками, некоторые с атрибутом «скорая помощь», другое «вмешательство». Я буду добавлять их на карте с 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, чтобы я мог анимировать их с помощью новой веб-анимации 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"); 
}}; 

Что я получаю:

• слои с «скорой помощи» атрибут получит класс «скорой помощи класса», но ...
• слои с атрибутом «вмешательства» получат «интервенционный класс», а также класс класса «скорая помощь».

Я также попытался:

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"). Любые идеи?

Answer 1

Если вызвать отдельную функцию, чтобы создать свой значок в 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);