我试图在放大传单时调整自定义图标的大小。为此,我想出了两个解决方案。一个使用 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:我制作图标和不同的组,并为每个带有 background-image
的图标添加一些 CSS > 属性(property)。然后在 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() {
函数内测量的。
- 对于 676 个标记,
L.Icon
方法需要 2500-2900 毫秒来更新。对于L.divIcon
,这只有 10-30 毫秒。 - 这次减半的标记量也减半了。
- 对于大约 100 个标记 (104),
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'您还可以为图标分配一个类名。使用 css-properties width
和 height
可以像我之前为 divIcons 做的一样,从而节省大量加载时间,同时允许您使用所有选项链接到 L.Icon
。不过,您的初始化时间仍会更长。
关于jquery - 传单自定义图标在缩放时调整大小。性能图标 vs divicon,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46015066/