在缩放更改时,Leaflet标记工具提示文本中的动态更改字体大小

栏目: 技巧 · 发布时间: 2021-04-13

简介  这篇文章主要介绍了在缩放更改时,Leaflet标记工具提示文本中的动态更改字体大小以及相关的经验技巧,文章约1858字,浏览量155,点赞数7,值得推荐!

我在地图上显示了一些文字,我通过这个例子做了这个

Rotate Lealfet markers tooltip text

如果缩小,我需要看到较小的文本,当我放大时,我需要更大的文本。

mymap.on('zoomend', function () {
    var zoomLevel = mymap.getZoom();
    var tooltip = $('.leaflet-tooltip');

    switch (zoomLevel) {
        case -2:
            tooltip.css('font-size', 7);
            break;
        case -1:
            tooltip.css('font-size', 10);
            break;
        case 0:
            tooltip.css('font-size', 12);
            break;
        case 1:
            tooltip.css('font-size', 14);
            break;
        case 2:
            tooltip.css('font-size', 16);
            break;
        case 3:
            tooltip.css('font-size', 18);
            break;
        default:
            tooltip.css('font-size', 14);
    }
}

我想这不是书的解决方案,我想要一个更好的方法来动态更改字体大小,以便在放大或缩小时遵循地图大小。

答案

所以我只是将事件从zoomend更改为zoomstart,缩放和字体更改之间没有更大的时间差距。

mymap.on('zoomstart', function () {
    var zoomLevel = mymap.getZoom();
    var tooltip = $('.leaflet-tooltip');

    switch (zoomLevel) {
        case -2:
            tooltip.css('font-size', 7);
            break;
        case -1:
            tooltip.css('font-size', 10);
            break;
        case 0:
            tooltip.css('font-size', 12);
            break;
        case 1:
            tooltip.css('font-size', 14);
            break;
        case 2:
            tooltip.css('font-size', 16);
            break;
        case 3:
            tooltip.css('font-size', 18);
            break;
        default:
            tooltip.css('font-size', 14);
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,版权归原作者或者来源机构所有,感谢作者,如果未能解决你的问题,请参考以下文章。

如何更改谷歌地图绘图管理器工具栏工具提示?

小册子R中的可变标记尺寸特征

Leaflet:连接线内可拖动标记的体系结构

leaflet 根据缩放级别控制图层的显示

在Leaflet for R中更改基础层而不会丢失叠加层(示例代码)