Leaflet 自定义Marker点Icon_leaflet 自定义图片点

Leaflet 自定义Marker点Icon

Leaflet 支持自定义Icon，我们可以给Marker点添加自定义的Icon。

创建自定义Icon

 var greenIcon = L.icon({
                iconUrl:'/assets/maker/marker-icon.png',//icon阴影图片路径
                shadowUrl:'/assets/maker/marker-shadow.png',//icon阴影图片路径

                iconSize:     [16, 32], // size of the icon
                shadowSize:   [16, 32], // size of the shadow
                iconAnchor:   [0, 16], // point of the icon which will correspond to marker's location
                shadowAnchor: [0, 0],  // the same for the shadow
                popupAnchor:  [-0, -32] // point from which the popup should open relative to the iconAnchor
                });
1
2
3
4
5
6
7
8
9
10

修改默认图标路径

Leaflet不仅支持直接使用自定义Icon，还可以修改系统默认Icon，但是只支持修改一整套，包括 icon和shadow。

直接把自己的命名为marker-icon.png和marker-shadow.png图片放在一个目录下，然后把目录的地址赋值给L.Icon.Default.imagePath

代码

 L.Icon.Default.imagePath ='../assets/maker/'  
1

加载Marker

L.marker([x,y],options);

options里面可以添加自定义的Icon对象：

例如:

{Icon":greenIcon}

整个样例源码：

<template>
<div id="map" >
</div>
</template>

<script>
export default {   
//生命周期 - 挂载完成（访问DOM元素）
    mounted() {
        this.init();
    },
    methods:{
        init(){
            let map=L.map('map',{
                center:[30.33, 120.10015131],
                zoom:13
            })
            //L.Icon.Default.imagePath ='../../assets/maker/' //修改默认Icon
            var greenIcon = L.icon({
                iconUrl:'/assets/maker/marker-icon.png',
                shadowUrl:'/assets/maker/marker-shadow.png',

                iconSize:     [16, 32], // 设置icon大小
                shadowSize:   [16, 32], // 设置shadow大小
                iconAnchor:   [0, 16], // point of the icon which will correspond to marker's location
                shadowAnchor: [0, 0],  // the same for the shadow
                popupAnchor:  [-0, -32] // point from which the popup should open relative to the iconAnchor
                });
            //加载图层
            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
            //加载marker点
            L.marker([30.33, 120.10015131],{icon:greenIcon}).addTo(map)
            .bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
            .openPopup();
        }
    }
}
</script>
<style scoped>
#map{
    height: 800px;
    width: 1200px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

效果：