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

Question

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

旋转 Lealfet 标记工具提示文本

如果缩小，我需要看到较小的文本，而当我放大时，文本应该更大。

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

我想这不是书本上的解决方案，我想寻求一种更好的方法来动态更改字体大小，以在放大或缩小时遵循地图大小。

Answer 1

所以我只是将事件从 更改为 ，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);
    }
});