Лист-лист: как установить класс css?

Ну, в заголовке сказано все, но здесь есть какой-то код, поэтому вы видите, что я имею в виду.

function eachFeature(feature, layer) {
     layer.on({
         mouseover: highlightFeature,
         mouseout: resetHighlight,
     });
}
geojson = L.geoJson(geojson_raw, { style: style, onEachFeature: eachFeature });
geojson.addTo(map);

geojson_raw - объект geojson, который хранится в переменной javascript. style - это просто функция, возвращающая объект с некоторыми атрибутами стиля. highlightFeature/resetHighlight - это функции для изменения этих стилей в соответствии с событиями mousein/out.

Итак, этот код работает, и я уже знаю, как изменять стили, реагируя на пользовательские события. Но как я могу установить фактическое имя css-class на пути, созданные из моих данных geojson? Позже в моем коде я хотел бы выбрать пути по определенному имени класса.

ОБНОВЛЕНИЕ

Через 2 года я снова наткнулся на этот вопрос. И мне потребовалось 2 часа, чтобы разгадать тайну. Принятый ниже ответ работает, НО есть улов. Он работает, только если вы установили cssClass до, который вы вызываете addTo(map) на уровне. После того, как он окончательно выкопал его в исходном коде, стало ясно, что листовки устанавливают только cssClass, когда каждый путь инициализируется.

Ответ 1

Код ниже позволит вам добавить класс после того, как пути создаются с помощью метода geoJosn с D3.

var svg = d3.select(map.getPanes().overlayPane).append("svg"),
g = svg.append("g").attr("class", "your_class");

Однако, если вы хотите добавить их при создании, используя только буклет, попробуйте вернуть их в методе стиля (функции), например:

function style(feature) {
        return {
          weight: 1,
          opacity: .5,
          fillOpacity: 0.7,
          className: feature.properties.name_of_node
        };
}

Это очень сработало для меня.

Ответ 2

Вы можете добавить атрибут "className" в свой объект стиля или добавить следующий класс следующим образом:

function eachFeature(feature, layer) {
     layer.on({
         mouseover: highlightFeature,
         mouseout: resetHighlight,
     });
}
geojson = L.geoJson(geojson_raw, { style: style, onEachFeature: eachFeature });
geojson.setStyle({'className': 'map-path'}); //will add the required class
geojson.addTo(map);

Ответ 3

Используя Leaflet 1.x, это немного другой способ сделать это - в моем случае карта уже была инициализирована, поэтому упомянутый выше стиль className не работает.

function eachFeature(feature, layer) {
     layer.on({
         mouseover: function(e) {$(e.target.getElement()).addClass("active");},
         mouseout: function(e) {$(e.target.getElement()).removeClass("active");}
     });
}

Вы также можете установить атрибут класса напрямую с помощью setAttribute на e.target.getElement(), если вы не используете jQuery.

Ответ 4

Что-то вроде этого должно сделать трюк. feature._container предоставляет базовый элемент DOM, поэтому вы можете использовать на нем регулярные операции DOM (например, classList в современных браузерах или setAttribute ( "класс", "someClass" ) в старых браузерах).

function eachFeature(feature, layer) {
     // Need to use setTimeout hack so the DOM container will be
     // available.  WARNING: may cause race condition issues,
     // maybe tie into some other timing event?
     window.setTimeout(function() {
         feature._container && feature._container.classList.add('someClass');
     }, 0);
}
geojson = L.geoJson(geojson_raw, { onEachFeature: eachFeature });
geojson.addTo(map);

Ответ 5

Если вы используете SVG, вы можете получить контейнер как this._container и обновить его класс.

Если вы используете Canvas, тогда будут проблемы, потому что утопление холста не поддерживает стили DOM и рисунок с контентом.

Таким образом, вы не можете использовать стили с различными реализациями и более эффективными стилями.

Ответ 6

Развернув ответ на @tbicr, вы должны сделать что-то вроде этого:

function onEachFeature(feature, path) {
  path.on('click', addClass);
}

function addClass(e){
    var path = e.target;
    var container = path._container;
    $(container).attr('class', 'test');
}

geojson = L.geoJson(geojson_raw, { style: style, onEachFeature: eachFeature });
geojson.addTo(map);

РЕДАКТИРОВАТЬ: Как всегда, я был бы рад описанию, если вы решите понизить, чтобы я мог улучшить его. Это единственный ответ до сих пор, в котором описывается, как добавить класс динамически подробно, и я не вижу, что с ним не так.