有没有办法根据传单中的缩放级别调整标记图标的大小?

cgl*_*mdq 20 javascript mapping leaflet

我正在为学校制作一个项目,我需要根据传单地图中的缩放级别调整标记图标的大小,是否有一种简单的方法可以实现这一目标?网上的任何教程?在此先感谢您的帮助!!!

Pat*_*k D 24

为了在放大/缩小时更改标记的大小,您需要处理该事件.

map.on('zoomend', function() { });
Run Code Online (Sandbox Code Playgroud)

zoomend只要地图完成放大或缩小,就会调用该事件.请在此处查看API .

现在,在此函数中,您可以调用自定义代码以更改标记的大小.例如,假设您想采用一种简单的方法,并将圆形标记的大小设置为等于地图缩放级别的大小.请在此处查看CircleMarker的API

// Create some marker that will be resized on the map zooming
var myMarker = new L.CircleMarker([10,10], { /* Options */ });

map.on('zoomend', function() {
  var currentZoom = map.getZoom();
  myMarker.setRadius(currentZoom);
});
Run Code Online (Sandbox Code Playgroud)

现在,只要地图放大或缩小,标记的大小就会改变.

  • 你可能想把`L.CircleMarker`改成'L.circle`.据我所知,`L.CircleMarker`用于圈子,不应改变缩放级别的大小 (4认同)

小智 6

我不确定Stophace指的是circleMarkers没有改变尺寸,但是,添加到批准的答案...如果你想调整circleMakers的大小或改变任何其他样式选项(我发现改变权重和半径是有帮助的),您可以使用以下方法:

    map.on('zoomend', function() {
        var currentZoom = map.getZoom();
        var myRadius = currentZoom*(1/2); //or whatever ratio you prefer
        var myWeight = currentZoom*(1/5); //or whatever ratio you prefer
            layername.setStyle({radius: myRadius, weight: setWeight});
    });
Run Code Online (Sandbox Code Playgroud)

layername将替换为包含circleMarkers的任何图层的名称...当然,您可以根据自己的需要更改分数.

我猜OP的学校项目已经完成,但我希望这有助于其他有同样问题的人!