leaflet 自定义图标图标继承（每天进步一点点）

念寒

于 2019-04-22 16:11:45 发布

阅读量2.3k

点赞数 1

分类专栏： leaflet 文章标签： leaflet

本文链接：https://blog.youkuaiyun.com/weixin_43746952/article/details/89454157

版权

leaflet 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用Leaflet的L.Icon继承特性来创建和优化地图图标，通过定义一个基类并根据不同需求更改图标URL，实现快速创建多种颜色的图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（例子参考leaflet官方教程的）

当我们需要用到的图标，大多数样式都是类似的，例如只有颜色不同，这个时候我们可以利用L.Icon的继承功能！

定义一个继承类：

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

创建图标，给不同的属性定义值

 var greenIcon = new LeafIcon({ iconUrl: '././assets/img/leaf-green.png' });
    var redIcon = new LeafIcon({ iconUrl: '././assets/img/leaf-red.png' });
    var orangeIcon = new LeafIcon({ iconUrl: '././assets/img/leaf-orange.png' });

添加到地图中

L.marker([32, -130], { icon: greenIcon }).addTo(this.mymap).bindPopup("I am a green leaf.");
    L.marker([22, -120], { icon: redIcon }).addTo(this.mymap).bindPopup("I am a red leaf.");
    L.marker([13, -100], { icon: orangeIcon }).addTo(this.mymap).bindPopup("I am an orange leaf.");

效果如图：

在这里插入图片描述