【WebGIS】leaflet入门-自定义MarkerIcon

一个纸人

已于 2023-04-28 10:24:04 修改

阅读量2.0k

点赞数 1

分类专栏： WebGIS 文章标签：前端 javascript

于 2023-04-28 10:22:11 首次发布

本文链接：https://blog.csdn.net/paperperson/article/details/130418788

版权

WebGIS 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

介绍

听着，所谓Marker，就是标记的意思，一般用于在地图上标记某些事物。如果是一个普通的标记的话，在上一节其实已经示范过了，就长下面这样

毫无特色的Marker
毫无特色！
我们的目标是下面这样
有点特色的Marker
这里需要用到一个自定义icon的对象，先给出官方的文档链接：L.icon

自定义MarkerIcon

官方的自定义icon的代码如下

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

    iconSize:     [38, 95], // icon的大小
    shadowSize:   [50, 64], // 阴影的大小
    iconAnchor:   [22, 94], // icon的渲染的位置（相对与marker）
    shadowAnchor: [4, 62],  // shadow的渲染的位置（相对于marker）
    popupAnchor:  [-3, -76] //若是绑定了popup的popup的打开位置（相对于icon）
});

然后使用L.marker的option将自定义的icon加载到marker上

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

还是先分析一下icon的定义方法，这里其实比较简单首先定义了icon和shadow的位置（shadow可以没有），然后定义了icon和shadow的size。后面的Anchor是指icon和shadow的一个偏移位置，官方的解释是这样的
iconAnchor的官方说明
在加载icon的时候，会将maker的坐标作为icon的左上角的位置，而iconAnchor则定义了icon的尖端的位置（相当于是icon相对于marker的偏移）

到这里就实现了自定义的markericon，你可以使用了，但是你使用一段时间之后就会发现，L.icon的方法需要你每次都定义这个对象，若是你有很多相同尺寸的icon的话就需要你对相同的代码输入很多遍，确实很麻烦。
不过别担心，leaflet还是提供了补救的方法。
官方例子如下：

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'});

可以使用L.Icon定义一个扩展，预留下iconUrl的位置，在后续就可以复用定义好的Icon.extend
这里的原理主要是L.icon的定义是这样的

L.icon = function (options) {
    return new L.Icon(options);
};

没错，icon就是返回了一个Icon的对象。那么我们使用Icon来定义自然也就可以了。

最后依旧是贴上官方的全部实例代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"
        integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"
        integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
    <title>cutsomMarkerIcon</title>
</head>

<body>
    <div id="map" style="height: 600px;"></div>
    <script>
        var map = L.map('map').setView([51.505, -0.09], 13)

        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attrubution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map)

        // var greesicon=L.icon({
        //     iconUrl:'./img/leaf-green.png',
        //     shadowUrl:'./img/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:greesicon}).addTo(map)

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

        var greenicon = new LeafIcon({ iconUrl: './img/leaf-green.png' })
        var redicon = new LeafIcon({ iconUrl: './img/leaf-red.png' })
        var orangeicon = new LeafIcon({ iconUrl: './img/leaf-orange.png' })

        L.marker([51.5, -0.09],{icon:redicon}).addTo(map)
        L.marker([51.495, -0.083], { icon: greenicon }).addTo(map)
        L.marker([51.49, -0.1], { icon: orangeicon }).addTo(map)


    </script>
</body>

</html>

拓展

icon的方法

在官方文档中，我们还可以看到Icon有这样两个方法

从描述上看，是将定义好的icon返回一个<img>形式的HTMLElement，以便可以在网页中使用，createShadow是形同的道理。

divIcon

这个对象可以让我们使用div来创建一个icon，忽略了iconUrl和shadowUrl。
实例如下

var divicon=L.divIcon({className:'div-icon'})
L.marker([51.5,-0.09],{icon:divicon}).addTo(map)

效果：
divIcon
需要注意的是，这里的div需要设置一下她的css样式。

好的，那本次拓展内容也到此结束。

结语

本文介绍了自定义的MarkerIcon，以及一种更方便大量定义Icon的方式

一个纸人

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
【WebGIS】leaflet入门-自定义MarkerIcon

听着，所谓Marker，就是标记的意思，一般用于在地图上标记某些事物。如果是一个普通的标记的话，在上一节其实已经示范过了，就长下面这样毫无特色！我们的目标是下面这样L.icon官方的自定义icon的代码如下iconSize: [38, 95], // icon的大小shadowSize: [50, 64], // 阴影的大小iconAnchor: [22, 94], // icon的渲染的位置（相对与marker）
复制链接

扫一扫