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

fontSize没有ol.style.Text选项。但是有一个font选项。

font选项是string，其语法与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',
  // …
});

openlayers 3 cluster中的字体大小

1 个答案: