我已经看到一些人解释了如何执行此操作，但是我不是编码人员，因此我无法弄清楚如何使其以已经摆放的方式工作。我只是想在放大和缩小时调整图标大小。
我只有4个缩放级别，我基本上只需要在0-2缩放时将它们缩小，然后再放大并分别设置为3和4（由于混乱。
这是我的代码
<!DOCTYPE html>
<html style="height: 100%; margin: 0;">
<head>
<title>Bannerlord Trading Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="scripts/leaflet/leaflet.css">
<script src="scripts/leaflet/leaflet.js"></script>
</head>
<body style="height:100%; margin: 0;">
<div id="map" style="width: 100%; height: 100%; background: #cfb6a9; margin: 0;"></div>
<script type="text/javascript">
//Pixel Size
var mapSW = [0, 4096],
mapNE = [4096, 0];
// Declare Map Object
var map = L.map('map', { zoomControl:false} ).setView([0,0], 2);
// Reference the tiles
L.tileLayer('maps/{z}/{x}/{y}.png',{
minZoom: 2,
maxZoom: 4,
continuousWorld: false,
noWrap: true,
crs: L.CRS.Simple,
//bounds: [[-90, -180], [90, 180]],
}).addTo(map);
map.setMaxBounds(new L.LatLngBounds(
map.unproject(mapSW, map.getMaxZoom()),
map.unproject(mapNE, map.getMaxZoom())
));
// Icons
var ColorIcon = L.Icon.extend({
options: {
iconSize: [35, 29],
iconAnchor: [15, 42],
popupAnchor: [0,-50],
tooltipAnchor: [20,-20]
//shadowUrl: 'images/pin-shadow.png',
//shadowSize: [0, 0],
//shadowAnchor: [0, 0],
}
});
// Icon Class color variations
var townIcon = new ColorIcon({iconUrl: 'images/red-marker2.png'}),
skullIcon = new ColorIcon({iconUrl: 'images/pin-skull.png'});
gateIcon = new ColorIcon({iconUrl: 'images/pin-moongate.png'});
poiIcon = new ColorIcon({iconUrl: 'images/pin-interest.png'})
//ref marker
var refmarker = L.marker([0,0], {
draggable: true,
}).addTo(map);
refmarker.bindPopup('');
refmarker.on('dragend', function(e) {
refmarker.getPopup().setContent('Clicked ' + refmarker.getLatLng().toString() + '<br />' + 'Pixels ' + map.project(refmarker.getLatLng(), map.getMaxZoom().toString())).openOn(map);
});
// Pixel Markers
// Towns
var town_Akkalat = L.marker(map.unproject([3525,1918],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Akkalat<b>').bindTooltip('<b>Akkalat<b>');
var town_Amitatys = L.marker(map.unproject([2002,2048],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Amitatys<b>').bindTooltip('<b>Amitatys<b>');
var town_Amprela = L.marker(map.unproject([2934,1358],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Amprela<b>').bindTooltip('<b>Amprela<b>');
var town_Argoron = L.marker(map.unproject([2491,1274],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Argoron<b>').bindTooltip('<b>Argoron<b>');
var town_Askar = L.marker(map.unproject([1667,3282],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Askar<b>').bindTooltip('<b>Askar<b>');
var town_Balgard = L.marker(map.unproject([2136,901],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Balgard<b>').bindTooltip('<b>Balgard<b>');
var town_Baltakhand = L.marker(map.unproject([3564,1074],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Baltakhand<b>').bindTooltip('<b>Baltakhand<b>');
var town_Car_Banseth = L.marker(map.unproject([1001,1169],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Car Banseth<b>').bindTooltip('<b>Car Banseth<b>');
var town_Chaikand = L.marker(map.unproject([3270,1671],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Chaikand<b>').bindTooltip('<b>Chaikand<b>');
var town_Charas = L.marker(map.unproject([654,2141],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Charas<b>').bindTooltip('<b>Charas<b>');
var town_Danustica = L.marker(map.unproject([3172,2447],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Danustica<b>').bindTooltip('<b>Danustica<b>');
var town_Diathma = L.marker(map.unproject([2157,1382],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Diathma<b>').bindTooltip('<b>Diathma<b>');
var town_Dunglanys = L.marker(map.unproject([1062,1358],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Dunglanys<b>').bindTooltip('<b>Dunglanys<b>');
var town_Epicrotea = L.marker(map.unproject([1826,1393],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Epicrotea<b>').bindTooltip('<b>Epicrotea<b>');
var town_Galend = L.marker(map.unproject([236,1738],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Galend<b>').bindTooltip('<b>Galend<b>');
var town_Hubyar = L.marker(map.unproject([2641,3278],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Hubyar<b>').bindTooltip('<b>Hubyar<b>');
var town_Husn_Fulq = L.marker(map.unproject([3298,2674],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Husn_Fulq<b>').bindTooltip('<b>Husn_Fulq<b>');
var town_Iyakis = L.marker(map.unproject([2287,3316],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Iyakis<b>').bindTooltip('<b>Iyakis<b>');
var town_Jaculan = L.marker(map.unproject([468,1841],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Jaculan<b>').bindTooltip('<b>Jaculan<b>');
var town_Jalmarys = L.marker(map.unproject([1636,2104],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Jalmarys<b>').bindTooltip('<b>Jalmarys<b>');
var town_Lageta = L.marker(map.unproject([1336,1814],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Lageta<b>').bindTooltip('<b>Lageta<b>');
var town_Lycaron = L.marker(map.unproject([2401,2147],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Lycaron<b>').bindTooltip('<b>Lycaron<b>');
var town_Makeb = L.marker(map.unproject([3291,1379],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Makeb<b>').bindTooltip('<b>Makeb<b>');
var town_Marunath = L.marker(map.unproject([1190,1553],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Marunath<b>').bindTooltip('<b>Marunath<b>');
var town_Myzea = L.marker(map.unproject([2861,1658],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Myzea<b>').bindTooltip('<b>Myzea<b>');
var town_Ocs_Hall = L.marker(map.unproject([632,1297],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Ocs Hall<b>').bindTooltip('<b>Ocs Hall<b>');
var town_Odokh = L.marker(map.unproject([3669,2129],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Odokh<b>').bindTooltip('<b>Odokh<b>');
var town_Omor = L.marker(map.unproject([2069,1184],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Omor<b>').bindTooltip('<b>Omor<b>');
var town_Onira = L.marker(map.unproject([3077,2177],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Onira<b>').bindTooltip('<b>Onira<b>');
var town_Ortongard = L.marker(map.unproject([3617,1542],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Ortongard<b>').bindTooltip('<b>Ortongard<b>');
var town_Ortysia = L.marker(map.unproject([1288,2175],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Ortysia<b>').bindTooltip('<b>Ortysia<b>');
var town_Ostican = L.marker(map.unproject([387,1029],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Ostican<b>').bindTooltip('<b>Ostican<b>');
var town_Pen_Cannoc = L.marker(map.unproject([889,1516],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Pen Cannoc<b>').bindTooltip('<b>Pen Cannoc<b>');
var town_Phycaon = L.marker(map.unproject([2678,2064],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Phycaon<b>').bindTooltip('<b>Phycaon<b>');
var town_Poros = L.marker(map.unproject([2173,2456],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Poros<b>').bindTooltip('<b>Poros<b>');
var town_Pravend = L.marker(map.unproject([412,1400],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Pravend<b>').bindTooltip('<b>Pravend<b>');
var town_Qasira = L.marker(map.unproject([2261,3031],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Qasira<b>').bindTooltip('<b>Qasira<b>');
var town_Quyaz = L.marker(map.unproject([1258,2483],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Quyaz<b>').bindTooltip('<b>Quyaz<b>');
var town_Razih = L.marker(map.unproject([2880,2957],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Razih<b>').bindTooltip('<b>Razih<b>');
var town_Revyl = L.marker(map.unproject([1243,860],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Revyl<b>').bindTooltip('<b>Revyl<b>');
var town_Rhotae = L.marker(map.unproject([1736,1817],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Rhotae<b>').bindTooltip('<b>Rhotae<b>');
var town_Rovalt = L.marker(map.unproject([644,1004],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Rovalt<b>').bindTooltip('<b>Rovalt<b>');
var town_Sanala = L.marker(map.unproject([1813,2804],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Sanala<b>').bindTooltip('<b>Sanala<b>');
var town_Saneopa = L.marker(map.unproject([2384,1696],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Saneopa<b>').bindTooltip('<b>Saneopa<b>');
var town_Sargot = L.marker(map.unproject([794,1897],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Sargot<b>').bindTooltip('<b>Sargot<b>');
var town_Seonon = L.marker(map.unproject([1411,1385],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Seonon<b>').bindTooltip('<b>Seonon<b>');
var town_Sibir = L.marker(map.unproject([2572,815],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Sibir<b>').bindTooltip('<b>Sibir<b>');
var town_Syronea = L.marker(map.unproject([3123,1863],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Syronea<b>').bindTooltip('<b>Syronea<b>');
var town_Tyal = L.marker(map.unproject([3086,910],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Tyal<b>').bindTooltip('<b>Tyal<b>');
var town_Varcheg = L.marker(map.unproject([1582,978],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Varcheg<b>').bindTooltip('<b>Varcheg<b>');
var town_Varnovapol = L.marker(map.unproject([2537,1020],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Varnovapol<b>').bindTooltip('<b>Varnovapol<b>');
var town_Vostrum = L.marker(map.unproject([2671,2631],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Vostrum<b>').bindTooltip('<b>Vostrum<b>');
var town_Zeonica = L.marker(map.unproject([1850,2397],map.getMaxZoom()), {icon: townIcon}).bindPopup('<b>Zeonica<b>').bindTooltip('<b>Zeonica<b>');
// Layer Groups
var group_towns = L.layerGroup([town_Akkalat, town_Amitatys, town_Amprela, town_Argoron, town_Askar, town_Balgard, town_Baltakhand, town_Car_Banseth, town_Chaikand, town_Charas, town_Danustica, town_Diathma, town_Dunglanys, town_Epicrotea, town_Galend, town_Hubyar, town_Husn_Fulq, town_Iyakis, town_Jaculan, town_Jalmarys, town_Lageta, town_Lycaron, town_Makeb, town_Marunath, town_Myzea, town_Ocs_Hall, town_Odokh, town_Omor, town_Onira, town_Ortongard, town_Ortysia, town_Ostican, town_Pen_Cannoc, town_Phycaon, town_Poros, town_Pravend, town_Qasira, town_Quyaz, town_Razih, town_Revyl, town_Rhotae, town_Rovalt, town_Sanala, town_Saneopa, town_Sargot, town_Seonon, town_Sibir, town_Syronea, town_Tyal, town_Varcheg, town_Varnovapol, town_Vostrum, town_Zeonica]).addTo(map);
var overlays = {
"Towns" : group_towns,
//"Dungeons" : group_dungeons,
//"Moongates" : group_moongates,
//"Points of Interest" : group_poi,
}
//Add layer controls
L.control.layers(null, overlays, {collapsed:false, position:'bottomleft'}).addTo(map);
</script>
</body>
</html>
任何帮助将不胜感激！
听zoomend事件，然后更新iconSize：
map.on('zoomend',function(){
map.eachLayer(function (layer){
if(layer instanceof L.Marker){
var icon = layer.getIcon();
var faktor = 1;
var zoom = map.getZoom();
if(zoom < 5){
faktor = 0.5;
}else if(zoom < 10){
faktor = 0.7;
}else if(zoom < 17){
faktor = 1;
}else{
faktor = 2;
}
if(!layer.initIconSize){
layer.initIconSize = icon.options.iconSize;
}
icon.options.iconSize = [layer.initIconSize[0]*faktor,layer.initIconSize[1]*faktor];
layer.setIcon(icon)
}
});
});