在Leaflet中定义多个自定义图标,可以通过L.Icon.Default.extend方法来创建自定义图标对象。具体步骤如下:
var CustomIcon = L.Icon.Default.extend({
options: {
iconUrl: 'path/to/icon.png',
iconSize: [38, 95],
iconAnchor: [22, 94],
popupAnchor: [-3, -76]
}
});
在上述代码中,我们定义了一个CustomIcon类,继承自L.Icon.Default,并在options属性中设置了自定义图标的相关属性,包括图标的URL、大小、锚点等。
var icon1 = new CustomIcon();
var icon2 = new CustomIcon({
iconUrl: 'path/to/another/icon.png',
iconSize: [50, 50]
});
在上述代码中,我们创建了两个自定义图标对象icon1和icon2。可以看到,通过直接实例化CustomIcon类,即可得到一个自定义图标对象。可以根据需要,设置不同的属性值。
L.marker([51.5, -0.09], {icon: icon1}).addTo(map);
L.marker([51.51, -0.1], {icon: icon2}).addTo(map);
在上述代码中,我们分别在地图上创建了两个标记点,并分别使用了自定义图标对象icon1和icon2作为标记点的图标。
总结起来,定义多个自定义图标在Leaflet中的步骤如下:
Leaflet官方文档:https://leafletjs.com/reference-1.7.1.html#icon
领取专属 10元无门槛券
手把手带您无忧上云