放大传单时,我试图调整自定义图标的大小。为此,我提出了两种解决方案。一个使用L.Icon
标记,另一个使用L.divIcon
。在两个示例中,我都只设置了1个标记和一个组以提高可读性
方法1使用的 L.Icon :使用标记进行分组。然后在zoomend
上,我使用mygroup.eachLayer(function (layer)
使用layer.setIcon()
更改1层的所有图标。我对所有组重复此操作
<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-property允许我更改图像大小。我为每个拥有的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/的经验。
第二个选项是否可取,因为它不需要重新设置每个图标?当存在大量的组/图标时,它会提高性能吗?
最佳答案
我自己使用performance.now()
进行了测试。我在1024x1180(边界)自定义 map 上进行了测试。曾经有676个制造商。然后使用大约一半的标记,最后使用100个标记。性能是在map.on('zoomend', function() {
函数内部测量的。
L.Icon
方法更新花费了2500-2900毫秒。对于L.divIcon
,这只有10到30毫秒。 L.Icon
花费了300-400毫秒来更新。 L.divIcon
仅在4到5毫秒内完成了相同的操作。 我还为676个标记计时了初始化(
L.layerGroup([...]).addTo(map)
)的性能。 L.Icon
花费了2200-2400毫秒。 L.divIcon
在80-95毫秒内执行了相同的操作。L.divIcon
显然做得更好(正如预期的那样)。虽然有点作弊,但我想我更喜欢使用这种方法。我无法直接想到为什么要缩放时首选L.Icon
方法的原因编辑:
我注意到,根据Leaflet Documentation 'Icon',您还可以为Icon分配一个className。使用css-properties
width
和height
可以像我之前对divIcons一样进行,从而节省了很多加载时间,但允许您使用链接到L.Icon
的所有选项。您的初始化时间仍然会更长。