javascript - openlayers 3集群中的字体大小

Question

我正在使用新的 openlayers 3 api 来显示大量标记。我扩展了集群示例 ( http://openlayers.org/en/v3.0.0/examples/cluster.html )。

除一件事外一切正常:文本样式中的属性 fontSize 被简单地忽略了。簇标记内的文本大小始终相同。

这是 openlayers 3 中的错误还是我做错了什么？我在 3.0.0 发布版本和 ol3 的当前开发版本中对其进行了测试。

    var clusters = new $wnd.ol.layer.Vector({
        source: clusterSource,
        style: function (feature, resolution) {
            var size = feature.get('features').length;

            var style = styleCache[size];
            var radius = size + 10;
            if (radius > 25) {
                radius = 25;
            }

            if (!style) {
                style = [new $wnd.ol.style.Style({
                    image: new $wnd.ol.style.Circle({
                        radius: radius,
                        stroke: new $wnd.ol.style.Stroke({
                            color: '#fff'
                        }),
                        fill: new $wnd.ol.style.Fill({
                            color: color
                        })
                    }),
                    text: new $wnd.ol.style.Text({
                        text: size == 1 ? "●" : size.toString(),
                        fontSize: radius * 2 - 5,
                        fill: new $wnd.ol.style.Fill({
                            color: textColor
                        })
                    })
                })];
                styleCache[size] = style;
            }

            return style;
        }
    });

Answer 1

ol.style.Text 没有fontSize 选项。不过有一个 font 选项。

font 选项是一个字符串，它与 Canvas 上下文 font 属性具有相同的语法。默认值为 '10px sans-serif'。参见 https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text .

所以在你的情况下你会使用这样的东西:

var textStyle = new ol.style.Text({
  font: (radius * 2 - 5) + 'px sans-serif',
  // …
});