官方解析

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

官方是准备了下面这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设置为[图片的宽度https://cdn.jxasp.com:9143/image/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>

关键词搜索

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

详情内容

官方解析

博主例子

相关技术文章

最新源码

下载排行榜

提示信息

选择支付方式