【问题标题】:is there a way to resize marker icons depending on zoom level in leaflet?有没有办法根据传单中的缩放级别调整标记图标的大小?
【发布时间】:2013-06-27 05:57:49
【问题描述】:

我正在为学校制作一个项目,我需要根据传单地图中的缩放级别调整标记图标的大小,有没有简单的方法来完成这个?网上有教程吗?提前感谢您的帮助!!!

【问题讨论】:

    标签: javascript mapping leaflet


    【解决方案1】:

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

    map.on('zoomend', function() { });
    

    只要地图完成放大或缩小,就会调用zoomend 事件。请参阅 API here

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

    // 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);
    });
    

    现在,无论何时放大或缩小地图,标记的大小都会发生变化。

    【讨论】:

    • 您可能想将L.CircleMarker 更改为L.circle。据我了解,L.CircleMarker 用于不应将大小更改为缩放级别的圆圈
    【解决方案2】:

    我不确定 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});
        });
    

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

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

    【讨论】:

    • 哎呀...打算将此作为对原始答案的评论发布...第一次在这里溢出!
    猜你喜欢
    • 1970-01-01
    • 2011-03-17
    • 1970-01-01
    • 1970-01-01
    • 2019-05-21
    • 2012-10-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多