1.2. 自定义图标¶
在本教程中，您将学习如何轻松地使用自定义图标标记地图。
| Show the example |
1.2.1. 准备图像¶
为了制作一个自定义图标，通常需要两个图像：实际的图标图像及其阴影图像。在本教程中，我们使用了Leaflet徽标并创建了4个图像-3个不同颜色的叶片图像和一个常见的阴影图像：
请注意，图像中的白色区域实际上是透明的。
1.2.2. 创建图标¶
Leaflet中的标记图标由 L.Icon 对象定义，并在创建标记时用作参数选项。让我们创建一个green leaf图标：
var greenIcon = L.icon({
iconUrl: 'leaf-green.png',
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95], // size of the icon
shadowSize: [50, 64], // size of the shadow
iconAnchor: [22, 94], // point of the icon which will correspond to marker's location
shadowAnchor: [4, 62], // the same for the shadow
popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
});
现在很容易在地图上放置一个图标：
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);
| View this example |
1.2.3. 定义图标类¶
如果我们需要创建一些有很多共同点的图标呢？让我们定义自己的图标类，其中包括共享选项。从L图标继承Leaflet真的很容易( L.Icon ):
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: 'leaf-shadow.png',
iconSize: [38, 95],
shadowSize: [50, 64],
iconAnchor: [22, 94],
shadowAnchor: [4, 62],
popupAnchor: [-3, -76]
}
});
现在我们可以在这个类中创建这三个树叶图标并使用：
var greenIcon = new LeafIcon({iconUrl: 'leaf-green.png'}),
redIcon = new LeafIcon({iconUrl: 'leaf-red.png'}),
orangeIcon = new LeafIcon({iconUrl: 'leaf-orange.png'});
您可能已经注意到，我们使用关键字 new 创建了一个叶子图标实例。那么，为什么不是所有的Leaflet类都由它创建呢？答案很简单：真正的Leaflet类是用大写字母(如L.Icon)命名的，并且它们还需要使用 new 创建，但它也用小写字母名称（L.Icon）命名，创建该名称是为了方便，例如：
L.icon = function (options) {
return new L.Icon(options);
};
也可以在类中做同样的事情。好的，让我们把这些图标的标记放在地图上：
L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map).bindPopup("I am a green leaf.");
L.marker([51.495, -0.083], {icon: redIcon}).addTo(map).bindPopup("I am a red leaf.");
L.marker([51.49, -0.1], {icon: orangeIcon}).addTo(map).bindPopup("I am an orange leaf.");
现在打开完整的示例。