我试图在leaflet缩放时调整自定义图标的大小。我提出了两个解决方案,一个使用
我几乎没有JavaScript/jQuery/...方面的经验。
第二个选项是否更可取,因为它不需要重新设置每个图标?当有大量组/图标时,这样做是否会提高性能?
L.Icon
标签,另一个使用L.divIcon
。在这两个示例中,我只设置了1个标记和分组以提高可读性。
方法1使用L.Icon:使用标记创建分组。然后在zoomend
上使用mygroup.eachLayer(function (layer)
来更改所有图标的1个层,使用layer.setIcon()
。我为所有组重复此操作。<script>
// Setting map options
....
// Setting Icon
var normalicon = L.icon({
iconUrl: 'icon1.jpg',
iconSize: [40,40],
iconAnchor: [20,20],
popupAnchor: [0,-20]
});
// Create a group
var normalLayer = L.layerGroup([
L.marker([200,200], {icon:normalicon})
]).addTo(map);
// Resizing on zoom
map.on('zoomend', function() {
// Normal icons
var normaliconresized = L.Icon.extend({
options: {
iconSize: [20*(map.getZoom()+2), 20*(map.getZoom()+2)], // New size!
iconAnchor: [20,20],
popupAnchor: [0,-20]
}
});
var normaliconchange = new normaliconresized({iconUrl: 'icon1.jpg'})
normalLayer.eachLayer(function (layer) {
layer.setIcon(normaliconchange);
});
.... Do the same for the other groups
});
</script>
方法2使用L.divIcon:我创建图标和不同的组,并为每个图标添加一些CSS样式,使用background-image
属性。然后,在zoomend
事件上,我仅使用JQuery更改CSS样式。background-size
CSS属性允许我更改图像大小。我对每个divIcon类都执行此操作。
Css
.iconsdiv{
width:20px; height:20px;
background-image:url("icon2.jpg");
background-size: 20px 20px;
}
Script
<script>
// Setting map options
....
// Setting Icon
var divicon = L.divIcon({className: 'iconsdiv', iconSize: null }); // Explicitly set to null or you will default to 12x12
// Create a group
var divLayer = L.layerGroup([
L.marker([200,200], {icon:divicon})
]).addTo(map);
// Resizing on zoom
map.on('zoomend', function() {
var newzoom = '' + (20*(map.getZoom()+2)) +'px';
$('#map .iconsdiv').css({'width':newzoom,'height':newzoom,'background-size':newzoom + ' ' + newzoom});
... repeat for the other classes
});
</script>
我几乎没有JavaScript/jQuery/...方面的经验。
第二个选项是否更可取,因为它不需要重新设置每个图标?当有大量组/图标时,这样做是否会提高性能?