Bagaimana cara mengubah warna marker Leaflet di mouseover?

9

Saya mengalami kesulitan mencari tahu mengapa metode Leaflet setstyleakan mengubah warna poligon tetapi tidak warna spidol saya.

Polygon berfungsi dengan baik:

Poligon

Tetapi spidol tidak akan berubah warna:

Spidol

Saya ingin dapat menggerakkan mouse di atas marker dan mengubah warnanya. Sepertinya setStyle akan melakukan ini. Tapi saya terus mendapatkanlayer.setStyle is not a function

Saya menggunakan Angular dan Leaflet bersama-sama untuk membuat peta (saya menggunakan directional-leaflet-directive).

Inilah bagian mouseover dari kode:

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

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

Ketika marker tersingkir, itu menyala pointMouseveryang kemudian mencoba untuk memanggil setStyle pada LeafletEvent.target. Saya telah console.logged LeafletEvent dan memang ada bagian Targetnya:

Target

Mengapa setStyle berfungsi untuk poligon dan tidak untuk marker? Apa cara untuk mengubah warna marker?

geojson markers leaflet

— Kyle Pennell
sumber

2

Anda harus memeriksa Leaflet.StyleEditor di GitHub. Butuh beberapa saat untuk mencari tahu cara agar demo berfungsi, tetapi 1) klik alat Gaya, 2) klik penanda, 3) titik kunci ... ubah pengaturan ikon menjadi sesuatu selain default, 4) pilih warna. Voila! Cukup apik.

— RyanKDalton

Dan Leaflet StyleEditor melakukan keajaibannya dengan memberi ikon URL Mapbox dari formulir ini: api.tiles.mapbox.com/v3/marker/pin-m-circle+ffc871.png , di mana ffc871 adalah string warna hex. Rupanya itu bisa berupa string hex enam digit! Tapi mungkin ini lebih baik dilakukan menggunakan MakiMarkers, yang tampaknya telah dirancang untuk tujuan ini: github.com/jseppi/Leaflet.MakiMarkers

— LarsH

6

Sepertinya Anda tidak dapat melakukan itu karena marker menggunakan gambar untuk di-render.

masukkan deskripsi gambar di sini

Saya pikir Anda perlu mengambil kelas ikon marker Anda dan mengubah atribut "iconUrl" menjadi gambar baru apa pun yang Anda inginkan.

Sumber: Referensi Leaflet API

Semoga itu bisa membantu,

DR

— Duncan Rager
sumber

8

Menemukannya berkat bacaan dokumentasi.

Poligon dalam selebaran merespons setStyletetapi penanda dapat diubah menggunakansetIcon

Dokumentasi untuk setIcon

— Kyle Pennell
sumber

5

Lihat Jawaban Kyle Pennell:

Poligon dalam selebaran merespons setStyle tetapi marker dapat diubah menggunakan setIcon

Anda dapat menggunakan baris berikut:

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

— Benno
sumber

1

Kyle Pennell memiliki pertanyaan dan jawaban yang bagus di sini;)

— Kyle Pennell

2

Anda dapat melakukannya tanpa harus membuat sejuta gambar ikon berbeda jika Anda menggunakan CSS.

Tambahkan penanda
temukan atribut backgroundcolor untuk css dan ubahlah.

Ini dia:

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

— Ricky
sumber

Jadi ini hanya mengubah warna latar belakang? Bisakah Anda memberi contoh seperti apa bentuk ikon itu?

— LarsH

1

@ LarsH, Ya, ini akan mengubah latar belakang (letakkan kotak hijau di belakang ikon tetesan air mata biru). Sayangnya, Anda tidak bisa begitu saja mengubah warna isian. Seperti yang telah ditunjukkan orang lain, ikon tidak memiliki properti warna. Ini hanya gambar (jpg atau png) dan Anda harus menukar seluruh gambar.

— JMers

1

Menggabungkan jawaban Ricky dengan /programming/7415872/change-color-of-png-image-via-css , kita dapat melakukan sesuatu seperti:

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

Anda juga dapat bermain saturate()dan brightness()mendapatkan lebih banyak warna.

Sebagaimana disebutkan dalam jawaban untuk pertanyaan itu, itu tidak didukung di semua browser: https://caniuse.com/#feat=css-filters

— Evan Battaglia
sumber