我使用Dennis Wilhelm的Leaflet Slider来显示Leaflet地图上的数据变化.
我正在尝试更改标记图标的更改,但没有正确.那么,当使用Leaflet Slider显示随时间的变化时,如何更改标记图标？我必须在原始的SliderControl.js中做些什么改变？
提前致谢！
以下是Dennis Wilhelm的Leaflet Slider代码的链接：
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);
对于slidercontrol,您需要创建两个图像：
(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
