Làm cách nào để thay đổi màu đánh dấu Tờ rơi trên di chuột?

Tôi đang gặp khó khăn trong việc tìm ra lý do tại sao phương pháp Tờ rơi setstylesẽ thay đổi màu của đa giác nhưng không phải là màu của các điểm đánh dấu của tôi.

Đa giác hoạt động tốt:

Nhưng các điểm đánh dấu sẽ không thay đổi màu sắc:

Tôi muốn có thể di chuột qua điểm đánh dấu và thay đổi màu sắc của nó. Có vẻ như setStyle sẽ làm điều này. Nhưng tôi cứ nhậnlayer.setStyle is not a function

Tôi đang sử dụng Angular và Leaflet cùng nhau để tạo ra bản đồ (Tôi đang sử dụng chỉ thị góc-tờ rơi).

Đây là phần di chuột của mã:

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

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

Khi điểm đánh dấu được xử lý, nó sẽ kích hoạt pointMousevervà sau đó cố gắng gọi setStyle trên LeafletEvent.target. Tôi đã console.logged LeafletEvent và thực sự có phần Target của nó:

Tại sao setStyle hoạt động cho đa giác chứ không phải cho điểm đánh dấu? Cách thay đổi màu đánh dấu là gì?

Có vẻ như bạn không thể làm điều đó bởi vì một điểm đánh dấu sử dụng một hình ảnh để kết xuất.

Tôi nghĩ rằng bạn cần lấy lớp biểu tượng của điểm đánh dấu của mình và thay đổi thuộc tính "iconUrl" thành bất kỳ hình ảnh mới nào bạn muốn.

Nguồn: Tham khảo API tờ rơi

Hy vọng rằng sẽ giúp,

DR

Tìm ra nó nhờ một số tài liệu đọc.

Đa giác trong tờ rơi phản hồi setStylenhưng có thể thay đổi điểm đánh dấu bằng cách sử dụngsetIcon

Tài liệu cho setIcon

Xem câu trả lời của Kyle Pennell:

Đa giác trong tờ rơi phản ứng với setStyle nhưng điểm đánh dấu có thể được thay đổi bằng setIcon

Bạn có thể sử dụng các dòng sau:

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

Bạn có thể làm điều đó mà không phải tạo ra một triệu hình ảnh biểu tượng khác nhau nếu bạn sử dụng CSS.

1. Thêm điểm đánh dấu
2. tìm thuộc tính backgroundcolor cho css và thay đổi nó.

Đây là:

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

Kết hợp câu trả lời của Ricky với /programming/7415872/change-color-of-png-image-via-css , chúng ta có thể làm một cái gì đó như:

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

Bạn cũng có thể chơi với saturate()và brightness()để có được nhiều màu sắc hơn.

Như đã đề cập trong câu trả lời cho câu hỏi đó, nó không được hỗ trợ trong tất cả các trình duyệt: https://caniuse.com/#feat=css-filters