javascript - 如何使用 Leaflet 的脉冲图标动态切换颜色

Question

鉴于下面的代码，我使用L.icon.pulse在我的地图中添加了一个非脉冲标记：

m = L.geoJSON(metaFeatures, {
  pointToLayer: function (feature, latlng) {
    var pulsingIcon = L.icon.pulse({
      iconSize: [3, 3],
      color: color,
      fillColor: color,
      animate: false,
    });
    var pulseMarker = L.marker(coordinates, { icon: pulsingIcon });
    return pulseMarker;

    //...
  },
});

稍后当我希望将其更改animate:false为animate:true并将颜色更改为red.

注意：如果标记是：

var circle = L.circleMarker(latlng, geojsonMarkerOptions);          

我可以做到：layer.setStyle({fillColor:'blue'});这将解决问题，但由于这是一个L.Marker无法做到的。

标签： javascriptleafletmaps

Answer 1

在 Leaflet 中，实例L.Marker没有任何.setStyle()方法，但它们确实有.setIcon()方法。

因此，您可以创建多个实例L.Icon并让您的标记使用其中一个，例如：

var map = new L.Map('leaflet', {
    layers: [
        new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
        })
    ],
    center: [0, 0],
    zoom: 0
});

var blueIcon = L.icon.pulse({ color: "blue", fillColor: "blue", animate: false});
var redIcon = L.icon.pulse({ color: "red", fillColor: "red", animate: true});

var mymarker = L.marker([0,0], {icon: blueIcon}).addTo(map);

L.DomEvent.on(document.getElementById('change-to-red'), 'click', function(){
  mymarker.setIcon(redIcon);
})

#leaflet { min-height: 300px; }

<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/leaflet-pulse-icon@0.1.0/src/L.Icon.Pulse.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet-src.js"></script>
<script src="https://unpkg.com/leaflet-pulse-icon@0.1.0/src/L.Icon.Pulse.js"></script>
<div id="leaflet"></div>
<button id='change-to-red'>Change to red!</button>