gpt4 book ai didi

javascript - 传单自定义标记图标缩放缩放

转载 作者:行者123 更新时间:2023-11-29 10:09:08 25 4
gpt4 key购买 nike

我使用 Leaflet 绘制了一个 OpenStreetMap 并附加了一个自定义图标标记

var mymap = L.map('mapid').setView([x, y], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: ID,
accessToken: accessToken
}).addTo(mymap);

var busIcon = new L.Icon({
iconUrl: 'images/marker/bus.png',
// shadowUrl: 'images/leaflet/marker-shadow.png',
iconSize: [12, 12],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
// shadowSize: [41, 41]
});

var marker = L.marker([x, y],{icon:busIcon}).addTo(mymap);

mymap.on('zoomed', function() {
var currentZoom = mymap.getZoom();
busIcon = new L.Icon({
iconUrl: 'images/marker/bus.png',
iconSize: [mymap.getZoom*2, mymap.getZoom*2],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
});
marker.setIcon(busIcon);
});

现在我想根据缩放级别调整我的标记图标的大小。我上面的代码有问题。我应该怎么办?如果标记是 CircleMaker,我可以使用 setRadius 函数轻松处理。但在这种情况下,标记是一个自定义图标,我按照上面的方法尝试但失败了。如何解决?

最佳答案

正如 YaFred 所说,有一些拼写错误,例如 zoomend,还有 mymap.getZoom 应该是 mymap.getZoom()

为了提出更高效的解决方案,我对这个老问题做了新的回答。您可以将 className 添加到您的图标中(参见 leaflet documentation )。也就是说我们可以通过css来编辑图标的高宽!在您的 zoomend 函数中,无需创建新图标,只需调用此 JQuery:

var newzoom = '' + (2*(mymap.getZoom())) +'px';
$('#mapid .YourClassName').css({'width':newzoom,'height':newzoom});

对于大量的标记,这将显着提高您的性能,如 stackoverflow 问题中所述: Leaflet custom icon resize on zoom. Performance icon vs divicon

关于javascript - 传单自定义标记图标缩放缩放,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36880922/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com