数据驱动的文本大小与内插？[Mapbox-gl-js]

Question

我正在努力实现更好的文本大小，并相信使用内插，我可能能够更新我当前的文本标签到一个更有效的格式。目前我们正在创建“静态文本”，从本质上说，我们获得了特定缩放级别的理想文本大小，然后在每个缩放级别上使用如下所示的停止缩放：

'text-size': {
    "stops": [
        [10, 0],
        [11, ((Math.pow(2, 11 - map.getZoom()) * uniqueFonts[i]))],
        [12, ((Math.pow(2, 12 - map.getZoom()) * uniqueFonts[i]))],
        [13, ((Math.pow(2, 13 - map.getZoom()) * uniqueFonts[i]))],
        [14, ((Math.pow(2, 14 - map.getZoom()) * uniqueFonts[i]))],
        [15, ((Math.pow(2, 15 - map.getZoom()) * uniqueFonts[i]))],
        [16, ((Math.pow(2, 16 - map.getZoom()) * uniqueFonts[i]))],
        [17, ((Math.pow(2, 17 - map.getZoom()) * uniqueFonts[i]))],
        [18, ((Math.pow(2, 18 - map.getZoom()) * uniqueFonts[i]))],
        [19, ((Math.pow(2, 19 - map.getZoom()) * uniqueFonts[i]))],
        [20, ((Math.pow(2, 20 - map.getZoom()) * uniqueFonts[i]))],
        [21, ((Math.pow(2, 21 - map.getZoom()) * uniqueFonts[i]))],
        [22, ((Math.pow(2, 22 - map.getZoom()) * uniqueFonts[i]))],
        [23, ((Math.pow(2, 23 - map.getZoom()) * uniqueFonts[i]))],
        [24, ((Math.pow(2, 24 - map.getZoom()) * uniqueFonts[i]))],
        [25, ((Math.pow(2, 25 - map.getZoom()) * uniqueFonts[i]))],
        [26, ((Math.pow(2, 26 - map.getZoom()) * uniqueFonts[i]))],
        [27, ((Math.pow(2, 27 - map.getZoom()) * uniqueFonts[i]))],
        [28, ((Math.pow(2, 28 - map.getZoom()) * uniqueFonts[i]))],
        [29, ((Math.pow(2, 29 - map.getZoom()) * uniqueFonts[i]))],
        [30, ((Math.pow(2, 30 - map.getZoom()) * uniqueFonts[i]))]
    ]
}

现在，这很好，我们得到的文本保持相同的大小，即使我们放大。我们有多边形，我们想要限制我们的文本在里面，这允许我们保持文本大小与多边形本身。因此，缩放文本的比例与多边形。

这种方法的缺点是，我们需要一个标签层为每一个独特的大小。由于您不能引用"{textSize}“或"get”或"textsize“的特性特定字体，所以我们必须在停止时进行调整。但是，从我们最初实现标签开始添加的内插代码来看，这似乎是可能的。

在一定程度上使用内插功能完成以下操作。但它似乎并不适用于所有的缩放级别。在缩放15+时，它似乎像预期的那样工作，但在缩放之前的任何事情都是奇怪的。下面是使用内插方法的代码：

'text-size': [
    "interpolate", ["linear"], ["zoom"],
    10, 0,
    11, [ "*", [ "^", [ "-", 11, map.getZoom()], 2], ["get", "textsize"]],
    12, [ "*", [ "^", [ "-", 12, map.getZoom()], 2], ["get", "textsize"]],
    13, [ "*", [ "^", [ "-", 13, map.getZoom()], 2], ["get", "textsize"]],
    14, [ "*", [ "^", [ "-", 14, map.getZoom()], 2], ["get", "textsize"]],
    15, [ "*", [ "^", [ "-", 15, map.getZoom()], 2], ["get", "textsize"]],
    16, [ "*", [ "^", [ "-", 16, map.getZoom()], 2], ["get", "textsize"]],
    17, [ "*", [ "^", [ "-", 17, map.getZoom()], 2], ["get", "textsize"]],
    18, [ "*", [ "^", [ "-", 18, map.getZoom()], 2], ["get", "textsize"]],
    19, [ "*", [ "^", [ "-", 19, map.getZoom()], 2], ["get", "textsize"]],
    20, [ "*", [ "^", [ "-", 20, map.getZoom()], 2], ["get", "textsize"]],
    21, [ "*", [ "^", [ "-", 21, map.getZoom()], 2], ["get", "textsize"]],
    22, [ "*", [ "^", [ "-", 22, map.getZoom()], 2], ["get", "textsize"]],
    23, [ "*", [ "^", [ "-", 23, map.getZoom()], 2], ["get", "textsize"]],
    24, [ "*", [ "^", [ "-", 24, map.getZoom()], 2], ["get", "textsize"]],
    25, [ "*", [ "^", [ "-", 25, map.getZoom()], 2], ["get", "textsize"]],
    26, [ "*", [ "^", [ "-", 26, map.getZoom()], 2], ["get", "textsize"]],
    27, [ "*", [ "^", [ "-", 27, map.getZoom()], 2], ["get", "textsize"]],
    28, [ "*", [ "^", [ "-", 28, map.getZoom()], 2], ["get", "textsize"]],
    29, [ "*", [ "^", [ "-", 29, map.getZoom()], 2], ["get", "textsize"]],
    30, [ "*", [ "^", [ "-", 30, map.getZoom()], 2], ["get", "textsize"]],
]

由于插值不像预期的那样起作用，我想知道我做了什么特别错误的事情吗？是否有一种方法可以在文本大小上使用数据驱动样式来模拟上述停止行为？如果是的话，如何才能做到呢？

Answer 1

所以我已经想清楚了。当我使用“指数”时，我使用的是“线性”，我还需要从1,0开始，下一个值是Math.ceil( map.getZoom() ) + 1。因此，对于返回到~13.5的map.getZoom()，它看起来如下所示：

'text-size': [
        "interpolate", ["exponential", 2], ["zoom"],
        1, 0,
        15, [ "*", [ "^", [ "-", 15, map.getZoom()], 2], ["get", "font"]],
        16, [ "*", [ "^", [ "-", 16, map.getZoom()], 2], ["get", "font"]],
        17, [ "*", [ "^", [ "-", 17, map.getZoom()], 2], ["get", "font"]],
        18, [ "*", [ "^", [ "-", 18, map.getZoom()], 2], ["get", "font"]],
        19, [ "*", [ "^", [ "-", 19, map.getZoom()], 2], ["get", "font"]],
        20, [ "*", [ "^", [ "-", 20, map.getZoom()], 2], ["get", "font"]],
        21, [ "*", [ "^", [ "-", 21, map.getZoom()], 2], ["get", "font"]],
        22, [ "*", [ "^", [ "-", 22, map.getZoom()], 2], ["get", "font"]],
        23, [ "*", [ "^", [ "-", 23, map.getZoom()], 2], ["get", "font"]],
        24, [ "*", [ "^", [ "-", 24, map.getZoom()], 2], ["get", "font"]],
        25, [ "*", [ "^", [ "-", 25, map.getZoom()], 2], ["get", "font"]],
        26, [ "*", [ "^", [ "-", 26, map.getZoom()], 2], ["get", "font"]],
        27, [ "*", [ "^", [ "-", 27, map.getZoom()], 2], ["get", "font"]],
        28, [ "*", [ "^", [ "-", 28, map.getZoom()], 2], ["get", "font"]],
        29, [ "*", [ "^", [ "-", 29, map.getZoom()], 2], ["get", "font"]],
        30, [ "*", [ "^", [ "-", 30, map.getZoom()], 2], ["get", "font"]],
]

Answer 2

只是为了增加@Stooky的答案。当你放大的时候，这个效果很好。但当你放大的时候就不太好了。我希望文本保持相对缩放的大小。就像你在AutoCAD中放大或缩小的时候。我必须为这个缩放选择一个最佳的缩放级别和字体大小。然后我从那开始一直工作下去。我的最佳变焦水平是17。我也改变了其他一些东西。

'text-size':[
    'interpolate', ['linear'], ['zoom'],
    14, 1,
    15, 2,
    16, 4,
    16.5, 8,
    17, 14,
    18, 16,
    18.5, [ "*", [ "^", [ "-", 18.5, map.getZoom()], 1.5], 14],
    19, [ "*", [ "^", [ "-", 19, map.getZoom()], 1.5], 14],
    20, [ "*", [ "^", [ "-", 20, map.getZoom()], 1.5], 14],
    21, [ "*", [ "^", [ "-", 21, map.getZoom()], 1.5], 14],
    30,24
]

如果有一种方法可以使用代码生成这个列表，但不确定算法是什么，那就太好了。

也许像这样的功能..。

'text-size': ZoomBasedTextSizes([optimum-font-size], [optimum-zoom-level]);