Leaflet文档阅读笔记-Markers With Custom Icons笔记

本文链接：https://blog.csdn.net/qq78442761/article/details/100655518

本文详细介绍如何在Leaflet地图上使用自定义图标，并通过示例展示了如何设置图标大小、位置及阴影，同时实现了点击图标后的弹窗事件。博主还分享了在本地GIS服务上实现相同功能的方法。

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

官方解析

博主例子

官方解析

这个内容主要是把自定义图片，放到地图上，并且还可以增加阴影图片，以及点击图片后的弹出事件。

官方是准备了下面这4张图片：

使用下面这种方式可以单独设置，自定义图标

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

运行截图如下：

在后面本人的例子中！

这里目前暂时把iconAnchor设置为[图片的宽度/2，图片的高度]

下面是定义一个类，然后简单调用的例子:

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.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.");

最后帖下官方全部代码！

<!DOCTYPE html>
<html>
<head>
	
	<title>Custom Icons Tutorial - Leaflet</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>


	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		#map {
			width: 600px;
			height: 400px;
		}
	</style>

	
</head>
<body>

<div id='map'></div>

<script>
	var map = L.map('map').setView([51.5, -0.09], 13);

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

	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.marker([51.5, -0.09], {icon: greenIcon}).bindPopup("I am a green leaf.").addTo(map);
	L.marker([51.495, -0.083], {icon: redIcon}).bindPopup("I am a red leaf.").addTo(map);
	L.marker([51.49, -0.1], {icon: orangeIcon}).bindPopup("I am an orange leaf.").addTo(map);

</script>



</body>
</html>

博主例子

这里采用本地的GIS服务，搭建方式看此博文，在此不再赘述

https://blog.csdn.net/qq78442761/article/details/100581622

程序运行截图如下：

并且还增加了弹窗响应

函数和理论都是上面官方的，在此不多说，直接上代码！

<!DOCTYPE html>
<html>
<head>
	
	<title>Hello Test4</title>

	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />


	<link rel="stylesheet" href="leaflet.css" />
    <script src="leaflet.js"></script>        
	<script src="leaflet-tilelayer-wmts-src.js"></script>
	<script src="echarts.js"></script>

	<style>
		html, body {
			height: 100%;
			margin: 0;
		}
		
		#map {
			width: 100%;
			height: 100%;
		}
		
		.chart{
			width: 600px;
			height: 300px;
			background-color: #fff;
		}
	</style>

	
</head>
<body>

<div id='map'></div>

<script type="text/javascript">


	
   var ign = new L.TileLayer.WMTS( "http://XXX,XXX,XXX,XXX:8080/geoserver/gwc/service/wmts" ,
                               {
                                   layer: 'GG_9:gg_9',
                                   tilematrixset: "EPSG:900913",
								   Format : 'image/png',
								   TileMatrix: 'EPSG:900913:8'
                               }
                              );
							  
	var map = L.map('map', {
		minZoom: 6,
		maxZoom: 7
	}).setView([32, 118], 7);



	L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map);
	map.addLayer(ign);
	map.invalidateSize(true);
	
	
	var popup = L.popup();
 
	function onMapClick(e) {
		popup
			.setLatLng(e.latlng)
			.setContent("You clicked the map at " + e.latlng.toString())
			.openOn(map);
	}
 
	map.on('click', onMapClick);
	
	//新加的代码
	var marker1 = L.icon({
		iconUrl: "img/marker1.png",
		iconSize: [128, 128],
		iconAnchor: [64, 128]
	});
	L.marker([32.3, 118.8], {icon: marker1}).addTo(map).bindPopup("南京的BOSS");
	
	var marker2 = L.icon({
		iconUrl: "img/marker2.png",
		iconSize: [128, 128],
		iconAnchor: [64, 128]
	});
	L.marker([31.4, 121.4], {icon: marker2}).addTo(map).bindPopup("上海的BOSS");
	
	var marker3 = L.icon({
		iconUrl: "img/marker3.png",
		iconSize: [128, 128],
		iconAnchor: [64, 128]
	});
	L.marker([34.7, 119.2], {icon: marker3}).addTo(map).bindPopup("连云港BOSS");
	
	//新添加法
	var OtherIcon = L.Icon.extend({
		
		options:{
			iconSize: [128, 128],
			iconAnchor: [64, 128]
		}
	});
	
	var marker4 = new OtherIcon({iconUrl: 'img/marker4.png'});
	var marker5 = new OtherIcon({iconUrl: 'img/marker5.png'});
	L.marker([34.9, 113.6], {icon: marker4}).addTo(map).bindPopup("郑州BOSS");
	L.marker([30.8, 114.3], {icon: marker5}).addTo(map).bindPopup("武汉BOSS");
	
	
	
	//新加的代码
	
</script>



</body>
</html>