leaflet：入门基础（四）之加载图标

前言

    之前讲过如何在图层上添加点数据，有时候一个简单的圆点虽然表达了其地理位置，但却无法让人一下明白其代表了什么，这一篇将讲解如何使用多样的图标来替代简单的一个圆点，用符号实现语义表达，更直观的明白它的含义。

图标资源

    这里提供一个图标资源网站：easyicon

   之前该网站不用登录就能下载到很多图标，但现在需要注册登录，并且每天只能有限的下载，但也足够我们使用了。把图标下载到本地即可。当然还有很多其他图标网站，如：阿里巴巴矢量图标库

加载图标

    设置一个图标的属性，并加载到地图

var starIcon = L.icon({
    iconUrl: 'star.png',
    iconSize: [20, 20], // 图标尺寸
    iconAnchor: [0, 0], // 图标偏移
});

L.marker([39.856,116.435], {icon: starIcon}).addTo(map);

    图标偏移的设置如图所示 ：

    放个图更形象一些

    如果我们有多个点要添加，每个点都这样写那<script>里就会变的很冗长，所以我们可以通过先设置一个图标类（可看作一个模板），再按模板生成的方式添加。

var transportIcon = L.Icon.extend({
    options: {
        iconSize: [20, 20], 
        iconAnchor: [0, 0], 
    }
});

var carIcon = new transportIcon({iconUrl: 'car.png'}),
    planeIcon = new transportIcon({iconUrl: 'plane.png'}),
    busIcon = new transportIcon({iconUrl: 'bus.png'});

L.marker([39.856,116.431], {icon: carIcon}).addTo(map);
L.marker([39.859,116.435], {icon: planeIcon}).addTo(map);
L.marker([39.851,116.439], {icon: busIcon}).addTo(map);

     与普通的圆点数据一样，也可以设置弹出框，弹出框的偏移量也可以设置（注：偏移方向改变了

var starIcon = L.icon({
            iconUrl: 'star.png',
            iconSize:  [20, 20],  // 图标尺寸
            iconAnchor: [0, 0], // 图标偏移量
            popupAnchor: [0, 0]  // 弹出框偏移量
        });

L.marker([39.856,116.435], {icon: starIcon}).addTo(map).bindPopup("I am a little star.");

                  

    如果想给图标加点阴影，使其更有立体感一些也是可以（这里就以官方的图片为例了

var greenIcon = L.icon({
    iconUrl: 'leaf-green.png',
    shadowUrl: 'leaf-shadow.png',

    iconSize:     [38, 95], 
    shadowSize:   [50, 64], 
    iconAnchor:   [22, 94], 
    shadowAnchor: [4, 62], 
    popupAnchor:  [-3, -76]
});

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

其他

    麻辣GIS：Leaflet官网的叶子是怎么变颜色的

系列

   ⭐希望大家多多点赞、收藏！

    leaflet：入门基础（一）

    leaflet：入门基础（二）之加载图层

    leaflet：入门基础（三）之加载数据

    leaflet：入门基础（五）之结束篇