openlayers 3群集中的字体大小

Question

I am using the new openlayers 3 api for showing a large amount of markers. I extended the cluster example ( http://openlayers.org/en/v3.0.0/examples/cluster.html ).

Everything works fine except one thing: The attribute fontSize in the style of the text is simply ignored. The size of the text inside the cluster marker is always the same.

Is this a bug in openlayers 3 or am i doing something wrong? I tested it in the 3.0.0 release version and in the current development version of 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

There's no fontSize option for ol.style.Text . There's a font option though.

The font option is a string , which has the same syntax as the Canvas context font attribute. The default is '10px sans-serif' .See https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_text .

So in your case you'll use something like this:

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