Question

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

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

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

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

1 个答案: