17

タイトルはそれをすべて言いますが、ここにいくつかのコードがあるので、私の意味がわかります。

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

geojson_rawjavascript 変数に保持される geojson オブジェクトです。 styleいくつかのスタイル属性を持つオブジェクトを返す関数です。 highlightFeature/resetHighlightは、mousein/out イベントに応じてこれらのスタイルを変更する関数です。

したがって、このコードは機能し、ユーザー イベントに反応してスタイルを変更する方法は既にわかっています。しかし、geojson データから作成されたパスに実際の css-classname を設定するにはどうすればよいでしょうか? コードの後半で、特定のクラス名でパスを選択したいと思います。

アップデート

2年後、私は再びこの問題に出くわしました。そして、謎を解くのに2時間かかりました。以下の受け入れられた回答は機能しますが、キャッチがあります。レイヤーを呼び出す前に cssClass を設定した場合にのみ機能します。addTo(map)最終的にソースコードを掘り下げた後、リーフレットは各パスが初期化されるときにのみ cssClass を設定することが明らかになりました。

4

7 に答える 7

12

以下のコードでは、D3 の geoJosn メソッドによってパスが作成された後にクラスを追加できます。

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

ただし、リーフレットのみを使用して作成時にそれらを追加する場合は、次のように style(feature) メソッドでそれらを返してみてください。

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

それは私にとって本当にうまくいきました。

于 2014-02-07T21:22:51.777 に答える
-1

SVG を使用している場合は、コンテナをthis._containerクラスとして取得して更新できます。

Canvas を使用する場合、canvas drown は DOM スタイルとコンテンツを使用した描画をサポートしていないため、問題が発生します。

したがって、実装が異なるスタイルを使用して、スタイルをより適切に使用することはできません。

于 2013-06-24T06:54:20.400 に答える
-1

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

編集：いつものように、反対票を投じる場合は、説明をいただければ幸いです。改善できます。これはこれまでのところ唯一の答えであり、クラスを動的に追加する方法を詳細に説明しており、何が問題なのかわかりません。

于 2014-03-09T19:37:36.840 に答える