Question

这是我的场景：我有一个带点功能的geojson，有些属性有＆＃34;救护车＆＃34;，其他＆＃34;干预＆＃34;。我将使用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函数应该查询该功能，检查功能的属性是否是＆＃34;救护车＆＃34;或者＆＃34;干预＆＃34;并相应地添加一个类：

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");
}};

我得到的是：

使用＆＃34;救护车＆＃34;属性将获得＆＃34;救护级＆＃34;上课，但是......
使用＆＃34;介入的层次＆＃34;属性将获得＆＃34;干预类＆＃34;并且还将获得＆＃34;救护车级＆＃34;类。

我也尝试过：

 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);

动态Leaflet图层类

1 个答案: