マウスオーバーでリーフレットマーカーの色を変更する方法

Leafletメソッドsetstyleがポリゴンの色を変更するが、マーカーの色は変更しない理由を理解するのに苦労しています。

ポリゴンは正常に動作します：

ただし、マーカーの色は変わりません。

マーカーの上にマウスを置くと、その色が変わります。setStyleがこれを行うようです。しかし、私は続けますlayer.setStyle is not a function

AngularとLeafletを一緒に使用してマップを作成しています（angular-leaflet-directiveを使用しています）。

コードのマウスオーバー部分は次のとおりです。

$scope.$on("leafletDirectiveMap.geojsonMouseover", function (ev, leafletEvent) {
        pointMouseover(leafletEvent);
    });

    function pointMouseover(leafletEvent) {
        var layer = leafletEvent.target;
        layer.setStyle({
            weight: 2,
            color: '#666',
            fillColor: 'white'
        });
    }

マーカーがマウスオーバーさpointMouseverれると起動し、LeafletEvent.targetでsetStyleを呼び出そうとします。LeafletEventをconsole.loggedしましたが、確かにそのTarget部分があります：

マーカーではなくポリゴンにsetStyleが機能するのはなぜですか？マーカーの色を変更する方法は何ですか？

マーカーは画像を使用してレンダリングするので、それはできないようです。

マーカーのアイコンクラスを取得し、「iconUrl」属性を新しい画像に変更する必要があると思います。

出典：Leaflet APIリファレンス

それが役に立てば幸い

DR

いくつかのドキュメントを読んで、それを理解しました。

リーフレットのポリゴンは反応しますsetStyleが、マーカーはsetIcon

setIconのドキュメント

カイル・ペネルの回答を参照してください：

リーフレットのポリゴンはsetStyleに応答しますが、マーカーはsetIconを使用して変更できます

次の行を使用できます。

// create custom icon
IconStyleOne = L.icon({
            iconUrl: 'img/image1.png'
        });
IconStyleTwo = L.icon({
            iconUrl: 'img/image2.png'
        });

// ...

//Create empty geojson with mouseover and mouseout events
geojson_feature = L.geoJson(false, {
    pointToLayer: function (feature, latlng) {
        return L.marker(latlng, {icon: IconStyleOne});
    },
    onEachFeature: function(feature,layer)
            {
            layer.on("mouseover",function(e){
                layer.setIcon(IconStyleOne)
            });
            layer.on("mouseout",function(e){
                layer.setIcon(IconStyleTwo)
            });
            }
}).addTo(this.map);

CSSを使用すれば、何百万もの異なるアイコン画像を作成する必要なく、それを行うことができます。

1. マーカーを追加
2. CSSのbackgroundcolor属性を見つけて変更します。

ここにあります：

var marker = L.marker([50,-20], {icon: myIcon}).addTo(map);
marker.valueOf()._icon.style.backgroundColor = 'green'

リッキーの答えを/programming/7415872/change-color-of-png-image-via-cssと組み合わせると、次のようなことができます。

var marker = L.marker([50,-20], {icon: myIcon}).addTo(map);
marker.valueOf()._icon.style.filter = 'hue-rotate(180deg)';

で遊んだり、色を増やしsaturate()たりすることもできbrightness()ます。

その質問への回答で述べたように、すべてのブラウザーでサポートされているわけではありません：https : //caniuse.com/#feat=css-filters