更改传单标记图标

我正在使用 Dennis Wilhelm 的 Leaflet Slider 在 Leaflet 地图上显示数据的变化。

我正在尝试更改标记图标，但效果不佳。那么，当使用Leaflet Slider显示随时间的变化时，如何更改标记图标呢？我必须在原始 SliderControl.js 中进行哪些更改？

提前致谢！

以下是 Dennis Wilhelm 的 Leaflet Slider 代码的链接：

https://github.com/dwilhelm89/LeafletSlider/blob/master/SliderControl.js https://github.com/dwilhelm89/LeafletSlider/blob/master/SliderControl.js

您可以创建新的图标类，如下所示：

var LeafIcon = L.Icon.extend({
    options: {
       iconSize:     [38, 95],
       shadowSize:   [50, 64],
       iconAnchor:   [22, 94],
       shadowAnchor: [4, 62],
       popupAnchor:  [-3, -76]
    }
});

然后创建一个新的图标对象，如下所示：

var greenIcon = new LeafIcon({
    iconUrl: 'http://leafletjs.com/examples/custom-icons/leaf-green.png',
    shadowUrl: 'http://leafletjs.com/examples/custom-icons/leaf-shadow.png'
})

现在您可以在地图中的标记图标上方，如下所示：

L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

你可以参考这个document http://leafletjs.com/examples/custom-icons/了解更多信息。

对于滑块控件，您需要创建两个图像：

(1) Marker Icon [ Use name: marker-icon.png ]
(2) Marker Icon Shadow [ Use name: marker-shadow.png ]

之后，您可以指定默认图像路径，如下所示：

L.Icon.Default.imagePath = "Url to the image folder"; // This specifies image path for marker icon. 
e.x L.Icon.Default.imagePath = "http://leafletjs.com/examples/custom-icons";

所以图标 URL 将是：

Icon URL  :  http://leafletjs.com/examples/custom-icons/marker-icon.png
Shadow URL:  http://leafletjs.com/examples/custom-icons/marker-shadow.png